前端如何调用计算机中的图片,在React中使用image标签

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

我在这里说的是普通的旧标签。您将在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';

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