Question

我正在尝试获取图像路径，但无法获取。我的代码文件在src的component文件夹中，而我的图像文件夹也在src文件夹中

function ImageWithText() {
render(){
return(
    <div class="col-md-6">
      <h2>Lorem</h2>
      <p>Lorem Ispum</p>
    </div>
    <div class="col-md-6">
      <img scr={require('./../images/foodone.jpg')} alt=""/>
    </div>
    );
   }
  }
   export default ImageWithText;

目录结构为

src-
   components-
       TextWithImage.js
   images-
       foodone.jpg

错误是

./ src / Components / ImageWithText.js 找不到模块：无法解析“ D：\ react work \ react javascript \ react-tu \ src \ Components”中的“ ./images/foodone.jpeg”

Answer 1

尝试../ images

因为您说的是js文件位于src下的components文件夹中，而图像文件夹也位于src中

基本上，

Src/
    Components/
        File.js
    Images/
        Cat.jpeg

使用./images，您将在file.js所在的目录中查找图像，但是，使用../images时，您将向下搜索，即在Src /

希望这会有所帮助！

Answer 2

尝试使用

<img scr={require('./../images/foodone.jpeg')} alt=""/>

希望这会起作用

Answer 3

确保<img>属性正确，scr必须为src。看看这个documentation

<img src={require('./images/foodone.jpg')} alt=""/>

无法在reactjs中设置图像路径

3 个答案: