ReactJs中的本地图像路径

Question

我正在学习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或添加../但似乎不起作用。

谁能帮帮我吗？

Answer 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")