如何在React中使用图像标签（附代码）在React中，图像标签有点奇怪。这并不是React的错，而是应用建立后图片在服

在React中，图像标签有点奇怪。这并不是React的错，而是应用建立后图片在服务器上的位置问题。

我在这里说的是普通的老<img src=""/> 标签。就是你在HTML中使用的那个。

当你在React组件中使用img ，src ，需要指向服务器可以提供的东西。

不要使用你电脑中的文件路径

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

现在的浏览器大多是沙盒式的，不会让你通过磁盘上的路径访问文件。如果你真的能做到这一点（也许是用file:// ），它在你部署应用程序时就会失效，因为网络服务器不会在同一个地方有这个文件！（不，这不是解决方法。(不，解决办法不是把它放在服务器上的同一个地方 :)

在React中，由于有一个构建步骤，你需要一种方法来包含图片。有2种主要的方法来做到这一点。

我在这里假设一个Create React App项目，其中public 目录下的所有内容都会被复制到服务器上，而src 下的所有内容都可以被导入JS文件中。

把图片文件放在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变量作为道具的方式。

你可以把图片文件放在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 （或者，你知道，你的实际域名，一旦它被部署！）来测试它。

首先，要知道import根本不是由React处理的--它们是由你的捆绑器处理的，这可能是Webpack。(如果你使用的是Create React App，那肯定是Webpack）。

Webpack、Rollup、Parcel和其他捆绑程序在概念上都是一样的：当你import 一个静态文件，如图片或CSS文件时，捆绑程序不会真的将该文件粘贴到 import 。相反，它做一个注释，说明这个特定的JS文件依赖于这个特定的图像/CSS文件/其他什么。

然后，捆绑器会将图片复制到输出目录，并生成一个唯一的名字（如a5c8d3f89cad.jpg ），在幕后，它将用<img src="a5c8d3f89cad.jpg"/> 替换<img src={yourName}/> 。

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

这一切都发生在你不必担心的情况下。

对于与手头的组件相关的一次性图片，我喜欢导入它们。导入图片的另一个好处是，如果文件丢失，构建就会失败，而且你会很快发现!出于这个原因，如果我打算使用图片，我倾向于导入图片。

对于一般的网站范围内的图片，或者手动导入它们会很烦人的地方，我会把它们放在公共位置。当React应用只是你整个网站的一小部分时，这是特别有用的，而且同一张图片应该被React和其他非React页面使用。在这种情况下，我宁愿避免重复使用图片（有可能出现副本不同步的情况）。