React JS 中的条件渲染和图像路径答案

【问题标题】：Conditional rendering and image path in React JSReact JS 中的条件渲染和图像路径
【发布时间】：2020-12-19 01:06:26
【问题描述】：

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

<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% 正确的。

【问题讨论】：

标签： javascript reactjs import module path

【解决方案1】：

你错过了大括号。这将起作用：

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

【讨论】：

我虽然一开始也是这样，但事实并非如此。图像仍然以这种方式显示损坏。我还尝试将 url 更改为 ./、/、. 之类的东西，但都没有奏效。我相信 Luis 明白了这一点，我尝试渲染的图像不在公共文件夹中，而是在 src 中。

【解决方案2】：

这是因为您的图片可能不在 public 文件夹中。

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

例如对于下面的代码，您需要一个 pathname 文件夹，其中 img.jpg 在 public 文件夹内。

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

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

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

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

您可以在此处查看更多信息 - adding-images-fonts-and-files 和此处 using-the-public-folder

【讨论】：

确实图片不是公开的，而是在 src 文件夹中。这是非常有用的信息 Luis，非常感谢！

【解决方案3】：

如果你没有import 图像文件的 url，那么如果你使用的是 webpack 类型的捆绑器，它不会在你的最终构建中包含该文件（以节省你包括未使用的不必要文件） .

最好的方法是用import 声明告诉打包器您需要该文件。然后它将有效地存储文件并在最终构建中更新 URL 引用时自动更新它。

您也可以将图像放在公用文件夹中，但这有几个缺点，正如此处其他答案所指出的那样。在一种情况下，我试图更新 URL 字符串以在 CSS 中作为background-image: 使用 - 但在运行时，文件结构将被您的网络捆绑器更改（但它不会理解它需要更新字符串），因此您的 URL 引用将指向不正确的位置。

这里有一些很好的阅读： https://www.freecodecamp.org/news/react-background-image-tutorial-how-to-set-backgroundimage-with-inline-css-style/

【讨论】：