一瞬间我真的不明白。假设我有一个组件，它有条件地呈现这样的数据：
<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% 正确的。
发生这种情况是因为您的图像可能不在public文件夹内。
您可以将资产添加到公用文件夹，然后您就可以访问它。
例如，对于下面的代码，您将需要一个pathname文件夹，文件夹中包含 img.jpg public。
<img src="../pathname/img.jpg" alt="loading" />
但最好的方法是在 JavaScript 文件中使用导入。这种机制提供了许多好处：
使用import，当页面呈现时，您将在图像中看到类似这样的内容：src="/static/media/img.xxxxx.jpg"。那是因为使用 import 告诉 webpack 将该文件包含在包中。
你错过了大括号。这将起作用：
<div>
{isLoading ? <img src={'../pathname/img.jpg'} alt='loading' /> : <Page />}
</div>