在 React 组件中导入和使用图像

作者

在 React 组件中导入和使用图像

Import and use an Image in a React component

在 React 组件中导入和使用图像：

  1. 导入本地图片，例如import MyImage from './thumbnail.webp';.
  2. 将导入的图像传递给元素src上的道具。img
  3. 例如，<img src={MyImage} alt="horse" />。
应用程序.js
// 👇️ import the image
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>
  );
}

反应导入图像

我们使用 ES6 默认导入在 React 应用程序中导入图像。

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

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

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

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

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

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

通常最好将图像放置在使用它们的组件旁边，以确保在您最终删除或更改组件时没有悬空图像。

您可以使用这种方法在 React 应用程序中导入和使用png、svg、webp、jpg等图像。

应用程序.js
// 👇️ import SVG image
import MyImage from './logo.svg';

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

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

如果您的图像位于目录中，请在元素上public设置属性时使用绝对路径。srcimg

例如，如果您有一个位于 的图像public/images/thumbnail.webp，您可以将src元素的img设置为"/images/thumbnail.webp"。

应用程序.js
export default function App() {
  return (
    <div>
      {/* 👇️ local image */}
      <img src="/images/thumbnail.webp" alt="horse" />

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

反应使用公共目录中的图像

如果您无法在设置中使用 ES6 导入/导出语法，请尝试使用
require().

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

上面的示例使用require()语法导入位于与App组件相同的目录中的 2 个图像。

如果您需要显示来自外部 URL 的图像，请将标签src上的 prop
设置img为图像的完整 URL。

应用程序.js
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。

–