javascript - 我的图像未在 ReactJS 中显示

Question

这是我的应用程序的一个组件，它有一个尚未输出的图像，我认为 src 是正确的，我的文件树是:

1. 应用程序:
2. 源代码: 3.1 图片 3.2 公牛.jpg 3.2 实用程序 3.3 Carta.js

此代码来自已获取图像的Carta.js:

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>
        )
    }
}

Answer 1

该问题可能是由于路径不正确造成的。这是因为您的 src 结构可能与构建结构不同，构建结构是由 webpack 生成的结构。

导入图像可能会给 bundle 添加额外的负载，但是 doing this will ensure that webpack move the images into the build folder ，并给出正确的路径。

如果图像与Carta.js位于同一文件夹中，则src应该以./开头。

import MyImage from './images/toro.jpg'

// ...rest of your code

<img src={MyImage} />