ReactJs 中的本地图像路径答案

【问题标题】：Local Image Path in ReactJsReactJs 中的本地图像路径
【发布时间】：2019-03-09 06:36:09
【问题描述】：

我正在学习 React，但遇到了一个问题，我无法引用其中的图像。在我的代码目录中，我有 src 文件夹，其中有组件和图像目录。在组件中，我有一个名为 Header.js 的组件，我试图从 src/images 目录访问图像，但它没有显示。我有很多图像要显示，但我不确定如何实现。

<div className="brand">
                        <img
                            className="logo"
                            src= "shopping-cart/src/images/Veggy.png"                           
                            alt="Veggy Brand Logo"
                        />
</div>

我已尝试删除 src 或添加 ../ 但似乎不起作用。

谁能帮帮我？

【问题讨论】：

您是否尝试过或者先使用 import * 导入您的图片作为图像“images/Veggy.png”并在以后使用它

标签： reactjs

【解决方案1】：

使用import导入图片

  import veggy from "shopping-cart/src/images/Veggy.png";

然后将 veggy 传递给 src

   <div className="brand">
                    <img
                        className="logo"
                        src={veggy}                         
                        alt="Veggy Brand Logo"
                    />
   </div>

或者直接使用require

    src = require("shopping-cart/src/images/Veggy.png")

【讨论】：