为什么<img>源路径仅适用于导入和url？

Question

我正在尝试创建一个简单的反应网站。但在创建的过程中，我遇到了这个问题

<img src="./logo.png"></img>

。

情况

• 当我使用图像 URL 或使用

  import LOGO from "./logo.png"

  时图像加载正常 但是当我使用

  <img src="./logo.png" alt=sample-image></img>

  时，我的图像无法加载并且出现替代文本。

请帮助理解为什么会发生这种情况。 这是我的 JS 文件的完整代码-

import ReactDOM from "react-dom/client"
import LOGO from "./logo.png"
const divElement = (
    <div>
        <img src={LOGO} alt="react-logo" width="40px"></img>
        <h1>Fun Facts About React</h1>
        <ul>
            <li>Was first released in 2013</li>
            <li>Was originally created by Jordan Walke</li>
            <li>Has well over 100K stars on Github</li>
            <li>Is maintained by Facebook</li>
            <li>Powers thousands of enterprise apps, including mobile apps</li>
        </ul>
    </div>
)
ReactDOM.createRoot(document.getElementById("root")).render(divElement)

Answer 1

如果你是用vite或者CRA创建的项目，你需要将你的图片放在public文件夹中，然后你的路径是：

<img src="/logo.png" alt="sample-image" />

Answer 2

当您在 React 项目中使用 import 语句导入像 logo.png 这样的图像文件时，构建工具（例如 webpack）会将导入的图像视为模块并进行相应处理。这意味着在构建过程中图像文件将与您的 JavaScript 代码一起进行处理和捆绑。

另一方面，当您使用带有 src 属性的传统 HTML 标签指向图像文件路径时，浏览器会直接从相对于 HTML 文件位置的指定路径获取图像文件。该方法不涉及构建工具，图像文件由Web服务器单独提供。

因此，为什么 import logo.png 可以工作，而带有路径的 img src 可能无法直接在 React 应用程序中工作，这是因为 React 使用不同的方法来处理图像等静态资源。通过在 JavaScript 或 TypeScript 代码中导入图像文件，React 可确保图像在构建过程中得到正确处理，并与应用程序的资产捆绑在一起。

要在 React 组件中使用图像，建议使用 import 语句导入图像文件，然后将其用作组件 JSX 中的变量。这种方法可确保构建工具正确处理图像并将其包含在最终包中。