时间戳

首页 > 解决方案 > React JS 中的条件渲染和图像路径

javascript - React JS 中的条件渲染和图像路径

问题描述

一瞬间真的搞不懂 假设我有一个组件，它有条件地呈现这样的数据：

<div>
{isLoading ? <img src="../pathname/img.jpg" alt="loading" /> : <Page />}
</div>

图像未以这种方式呈现，显示损坏的文件图标。但是，如果我导入相同的图像，它就可以正常工作：

import loadingImage from "../pathname/img.jpg"
<div>
{isLoading ? <img src={loadingImage} alt="loading" /> : <Page />}
</div>

我使用npm start并且我的编辑器是 VS Code。您知道导入它的原因可能是什么，而不仅仅是简单地提供路径名，src即使路径相同？在第一个示例中，我提供的路径和文件名是 100% 正确的。

标签： javascriptreactjsimportmodulepath

解决方案

发生这种情况是因为您的图像可能不在public文件夹内。

您可以将资产添加到公用文件夹，然后您就可以访问它。

例如，对于下面的代码，您将需要一个pathname包含 img.jpg 的public文件夹。

<img src="../pathname/img.jpg" alt="loading" />

但最好的方法是在 JavaScript 文件中使用 import。这种机制提供了许多好处：

  • 脚本和样式表被缩小并捆绑在一起，以避免额外的网络请求。
  • 文件包含在包中
  • 缺少文件会导致编译错误，而不是为您的用户带来 404 错误。
  • 结果文件名包含内容哈希，因此您无需担心浏览器缓存其旧版本。

使用import，当页面被渲染时，您将在图像中看到类似这样的内容：src="/static/media/img.xxxxx.jpg"。那是因为使用 import 告诉 webpack 将该文件包含在包中。

您可以在此处查看更多信息 -添加图像字体和文件，并在此处使用公共文件夹

推荐阅读