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";

然后将蔬菜传递给src

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

或直接使用require

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

ReactJs中的本地图像路径

1 个答案: