时间戳

首页 > 解决方案 > 为什么我的图像路径不起作用？

javascript - 为什么我的图像路径不起作用？

问题描述

这是我的文件夹布局

src                                   (folder)
   images                             (folder)
         alligators                   (folder)
                  Alligator 1.svg     (svg file)
   main.js                            (javascript file)

这是我在 main.js 文件中的代码行：

    <img src={require("./images/alligators/Alligator 1.svg")} alt="alligator illustrator" />

我没有收到任何错误，我只是让我的替代文本显示并且我的图像没有显示。

我的路径似乎有什么问题？

我也只是尝试了没有“require”的 {} curly，但结果是一样的。我尝试在没有空格的情况下重命名 Alligator 1，但结果还是一样。

如果我的代码是正确的，还有什么其他可能的原因会发生这种情况？

标签： javascripthtmlreactjsimagepath

解决方案

更新您的代码以导入图像，然后在 src 中使用它，如下所示：

import alligator from './images/alligators/Alligator 1.svg';
...
<img src={alligator} alt="alligator illustrator" />

通过导入，您的文件被存储到alligator其中，然后可供 React 使用。React 然后在你的 img 标签中解析它。

推荐阅读