在React中使用image标签

在React中，图像标签有点怪异。这实际上不是React的错，而是一个问题，即在构建应用后，图像将在服务器上的位置。

我在这里说的是普通的旧<img src=""/>标签。您将在HTML中使用的同一代码。

当您img使用React组件时，src道具需要指向服务器可以服务的东西。

不要使用计算机中的文件路径

对于初学者来说，常见的错误是将设置为src他们计算机上的文件路径，例如/Users/yourname/Projects/this-react-app/src/image.png。那行不通。

如今，浏览器大多处于沙盒状态，因此无法通过其在磁盘上的路径来访问文件。如果您确实可以使用它（也许可以使用file://），则在部署该应用程序后它将立即中断，因为Web服务器不会在同一位置存储该文件！（不，解决方案是不要将其放在服务器上的同一位置：）

在React组件中包含图像的两种方法

使用React，由于有一个构建步骤，您需要一种包含图像的方法。有两种主要方法可以做到这一点。

我将在此处假设一个Create React App项目，其中public目录中的所有内容都将复制到服务器，并且下面的所有内容src对于导入JS文件都是公平的游戏。

选项1：import将图像导入组件

将图像文件放在src文件夹下的某个位置。仅此一项将不会自动使其可用，因此您必须将图像导入到使用它的React组件中。

import companyLogo from './path/to/logo.jpg';

然后，您可以通过该变量名称来引用它。名称可以是您想要的任何名称，不必与图像匹配或任何其他名称。

无论您要在哪里显示图像，请渲染img标签并将该变量作为传递src：

function Home() {
  return (
    <div>
      <img src={companyLogo} alt="BigCo Inc. logo"/>
    </div>
  );}

请注意，我正在使用，src={companyLogo}而不是src="companyLogo"！如果使用带引号的字符串"companyLogo"，它将尝试在处获取文件，/companyLogo这将失败。如果您使用的是导入的图像，请确保使用花括号。花括号是将JS变量作为道具传递的方式。

选项2：将图片放在public目录中

您可以将图像文件放在public文件夹中（或者如果不是Create React App…，那么将被复制到服务器的任何文件夹）。

然后，假设您的服务器将公用文件夹视为“根”目录（/），则您的图像将相对于该目录可用-就像纯HTML一样。

因此，如果您在拥有一张图片public/images/thing.jpg，则可以通过以下方式显示该图片：

function Home() {
  return (
    <div>
      <img src="images/logo.jpg" alt="BigCo Inc. logo"/>
    </div>
  );}

由于此方法使图像可以在Web服务器上作为常规文件使用，因此您可以通过http://localhost:3000/images/logo.jpg在浏览器中打开（或在部署后知道您的实际域名！）对其进行测试。

导入的图像如何在React中工作

首先，要知道imports根本不是由React处理的-它们是由您的捆绑程序（可能是Webpack）处理的。（如果您使用的是Create React App，则肯定是Webpack）

Webpack，Rollup，Parcel和其他import捆绑器在概念上都以相同的方式工作：当您使用静态文件（例如图像或CSS文件）时，捆绑器实际上不会将该文件粘贴到该import位置。相反，它指出此特定JS文件取决于此特定图像/ CSS文件/所有内容。

然后，打包程序将使用生成的唯一名称（如a5c8d3f89cad.jpg）将映像复制到输出目录，然后在后台将其替换<img src={yourName}/>为<img src="a5c8d3f89cad.jpg"/>。

如果图像特别小，Webpack甚至可能决定将其内联到JS捆绑软件中，作为一种优化。

这一切都无需担心。

img在React中使用标签的最佳方法？

对于与当前组件相关的一次性图像，我喜欢将其导入。导入的图像还有一个好处，就是如果缺少该文件，构建将失败，您会很快发现！因此，如果要使用图像，我倾向于导入图像。

对于整个站点范围内的通用图像，或手动导入它们会很烦人的地方，我将其公开发布。当React应用仅占整个站点的一小部分，并且React和其他非React页面都应使用相同的图像时，这尤其有用。在这种情况下，我宁愿避免复制图像（可能会导致副本不同步）。