在 React 中显示来自 URL 或本地路径的图像

作者

目录

Display an image from a URL / local path in React

  1. 在 React 中显示来自 URL 的图像
  2. 在 React 中显示来自本地路径的图像
  3. 在 React 中显示公共目录中的图像

在 React 中显示来自 URL 的图像

要显示来自 URL 的图像，请使用img标签并将其src属性设置为图像的完整 URL。

可选择将alt道具设置为图像的简短描述。

应用程序.js
import React from 'react';

export default function App() {
  return (
    <div>
      <img
        src="https://bobbyhadz.com/images/blog/react-prevent-multiple-button-clicks/thumbnail.webp"
        alt="car"
      />
    </div>
  );
}

该示例显示如何显示来自外部 URL 的图像。

我们使用了img标签并将其src属性设置为指向图像的完整 URL。

请注意，自动关闭的图像 – <img />。

该alt道具可帮助屏幕阅读器了解图像的含义。

在 React 中显示来自本地路径的图像

如果你需要在 React 中显示来自本地路径的图像：

  1. 下载图像并将其移动到您的src目录中。
  2. 将图像导入您的文件，例如
    import MyImage from './thumbnail.webp'.
  3. 将src图像元素的属性设置为导入的图像。
应用程序.js
import React from 'react';

import MyImage from './thumbnail.webp';

export default function App() {
  return (
    <div>
      {/* 👇️ local image */}
      <img src={MyImage} alt="horse" />

      {/* 👇️ external image */}
      <img
        src="https://bobbyhadz.com/images/blog/react-prevent-multiple-button-clicks/thumbnail.webp"
        alt="car"
      />
    </div>
  );
}

该示例假定您thumbnail.webp在与App组件相同的文件夹中有一个名为的图像。

确保指定图像文件的正确路径（包括扩展名）。

例如，如果您从一个目录向上导入图像，您将导入为import MyImage from '../thumbnail.webp'.

该图像必须位于src您的项目目录中。

请注意，在这两个示例中，我们都在标签src上设置了 prop以渲染图像。 img

对于来自外部 URL 的图像，您可以将src图像的 prop 设置为完整的 URL。

对于本地图像，您可以将标签src的属性设置img为导入的图像。

根据您的设置，您也许还可以使用require()语法来显示本地图像。

应用程序.js
import React from 'react';

export default function App() {
  return (
    <div>
      {/* 👇️ local image */}
      <img src={require('./thumbnail.webp')} alt="horse" />
    </div>
  );
}

代码示例假定有一个thumbnail.webp文件位于与您的模块相同的目录中App.js。

在 React 中显示公共目录中的图像

您还可以渲染位于publicReact 项目目录中的图像。

当您的图像位于public目录中时，请使用绝对路径。

以下示例假设有一个thumbnail.webp图像位于public/images/thumbnail.webp.

应用程序.js
import React from 'react';

export default function App() {
  return (
    <div>
      <img src="/images/thumbnail.webp" alt="horse" />
    </div>
  );
}

请注意，我们指定了图像的绝对路径 – 以正斜杠开头的路径。

小路
public/
  images/
    thumbnail.webp

省略文件public夹，路径从images目录开始。

确保在属性值中指定图像的扩展名src
。