React技巧之导入并使用Image

总览

在React组件中导入并使用image

  1. 导入本地图片,比如说,import MyImage from './thumbnail.webp'; 。
  2. 将导入的图片传递给img元素的src属性。
  3. 比如说,<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=""
        alt="car"
      />
    </div>
  );
}

React技巧之导入并使用Image

导入

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

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

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

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

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

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

你可以使用该方法在React应用中导入并使用pngsvgwebpjpg 等图片。

// ?️ 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=""
        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=""
        alt="car"
      />
    </div>
  );
}

React技巧之导入并使用Image

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=""
        alt="car"
      />
    </div>
  );
}

上面的例子向我们展示了如何显示来自外部URL的图片。我们使用了img标签,并将它的src属性设置为指向图片的完整URL。