2

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:

  1. 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>
        )
    }
}
Mauricio De armas
  • 2,079
  • 3
  • 11
  • 15
  • Check this answer https://stackoverflow.com/questions/40380054/error-while-trying-to-add-image-to-react-project/40380431#40380431 – Shubham Khatri Jun 22 '17 at 15:56

1 Answers1

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} />
Mμ.
  • 8,382
  • 3
  • 26
  • 36