无法在 reactjs 中设置图像路径答案

【问题标题】：Can't set image path in reactjs无法在 reactjs 中设置图像路径
【发布时间】：2020-01-07 22:32:15
【问题描述】：

我正在尝试获取图像路径，但无法获取。我的代码文件在 src 的组件文件夹中，我的图像文件夹也在 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”

【问题讨论】：

把你的组件代码贴在你用过图片的地方。
您正在使用./images ，它将在组件文件夹中查找图像。你应该使用 ../images/foodone.jpeg
试试这个 - <img scr={require('../images/foodone.jpeg')} alt=""/>
行得通！现在没有错误但图像没有出现在前端
@mohitchandel，检查图片名称和扩展名是否正确。

标签： reactjs

【解决方案1】：

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

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

【讨论】：

是的，你犯了那个小错误！谢谢问题是“scr”

【解决方案2】：

试试 ../images

因为你说js文件在src下的components文件夹中，而image文件夹也在src中

基本上，

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

使用 ./images 可以在 file.js 所在的同一目录中查找图像，但是使用 ../images 可以降低级别，即在 Src/ 中

希望这会有所帮助！

【讨论】：

你能把你的目录结构和整个 js 文件一样显示出来吗？

【解决方案3】：

尝试使用

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

希望这会奏效

【讨论】：

是的，它能够消除错误，但图像未显示在前端
确保图片有宽度和高度。尝试使用检查元素查看图像是否在浏览器上加载
我已经检查了每一件事