My image is not shown in ReactJS

Question

This is a Component of my App, it has a image that has not got output, i think the src is right, my files tree is:

App:
1. src: 3.1 images 3.2 bull.jpg 3.2 utils 3.3 Carta.js

this code is from Carta.js that have got the Image:

import React, {Component} from 'react'; import './Carta.css' import FlipCard from 'react-flipcard'; export default class Carta extends Component{ render(){ return( <div className="carta" onClick={this.props.seleccionarCarta}> <FlipCard flipped={this.props.estaSiendoComparada || this.props.fueAdivinada} disabled={true} > <div className="portada"></div> <div className="contenido"> <ul> <li><img src={"images/toro.jpg"} alt={''} /></li> </ul> </div> </FlipCard> </div> ) } }

Check this answer stackoverflow.com/questions/40380054/…

Shubham Khatri
– Shubham Khatri

2017-06-22 15:56:05 +00:00
Commented Jun 22, 2017 at 15:56 — Shubham Khatri
– Shubham Khatri, Commented Jun 22, 2017 at 15:56

Mμ. · Accepted Answer · 2017-06-22 16:27:41Z

1

The problem is probably due to incorrect path. This is because your src structure might be different than the build structure, which is the structure generated by webpack.

Importing image may add an extra load to the bundle, but doing this will ensure that webpack move the images into the build folder, and give the correct paths.

If images is in the same folder as Carta.js, then the src should have ./ at the beginning.

import MyImage from './images/toro.jpg' // ...rest of your code <img src={MyImage} />

edited Jun 22, 2017 at 16:27

answered Jun 22, 2017 at 15:47

Mμ.

8,5723 gold badges28 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Adolfo Onrubia Over a year ago

¿Why import it if you can just reference it? It should increase bundle size, as far as I know is not the best practice. Please, correct me if I'm wrong

Mμ. Over a year ago

Nevermind about my previous answer. See my updated answer.

Mauricio De armas Over a year ago

Still having no output, the src doesnt found the image, idk why

Mμ. Over a year ago

is your directory called 'Images' and not 'images'? Also is it on the same folder as Carta.js?

Mauricio De armas Over a year ago

images its all in lower case

|

Collectives™ on Stack Overflow

My image is not shown in ReactJS

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related