React技巧之导入并使用Image

chuckQu

发布于 2022-08-19 15:41:31

2K0

文章被收录于专栏：前端F2E前端F2E

原文链接：https://bobbyhadz.com/blog/react-import-image[1]

作者：Borislav Hadzhiev[2]

正文从这开始~

总览

在React组件中导入并使用image：

导入本地图片，比如说，import MyImage from './thumbnail.webp'; 。
将导入的图片传递给img元素的src属性。
比如说，<img src={MyImage} alt="horse" /> 。

// 👇️ 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>
  );
}

react-import-image.png

导入

我们使用ES6默认导入在React应用中导入图片。alt属性帮助屏幕阅读器来理解当前图片是关于什么的。

需要注意的是，img元素是自闭合标签 - <img /> 。

上面的例子假设你有一个名为thumbnail.webp的图片，和App组件位于同一文件夹下。

请确保为图片指定了正确的路径（包括扩展名）。

举例来说，如果要从上层目录导入一个图片，应该这么导入：import MyImage from '../thumbnail.webp' 。图片须位于项目的src目录中。

通常情况下，最好将图篇放在使用它们的组件旁边，以确保在你最终删除或改变组件时不会有多余的图片。

你可以使用该方法在React应用中导入并使用png, svg, webp, jpg 等图片。

// 👇️ 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目录

如果图片位于public目录，当在img元素上设置src属性时，请使用图片的绝对路径。

比如说，如果有一张图片位于public/images/thumbnail.webp ，你应该设置src属性为"/images/thumbnail.webp" 。

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>
  );
}

react-use-image-from-public-directory.png

require

如果你的设置中不能使用ES6的导入/导出语法，可以尝试使用require()。

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组件相同的路径中。

外部URL

如果你需要显示一个来自外部URL的图片，请将img标签上的src属性设置为图片的完整URL。

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。