reactjs - React Img Src 路径不工作 - 如何导入图像

Question

当您尝试使用经典 HTML 在 React 中导入任何类型的图像时，它不起作用，这是一个大问题。那么如何解决这个问题呢？

<img src='./Image/Checked.png' height=50px width=50px/>

Answer 1

我花了一点时间研究这个问题，我找到了 3 种方法来解决这个问题。这就是我提出这个问答式问题的原因。希望能帮助其他像我一样的人节省一些时间。

通常在 HTML 中你会使用这段代码

<img src='./Image/Checked.png' height=50px width=50px/>

但是在 React 中，当您尝试导入图像等 Assets 时，您需要一个 require 标签。在旧版本中，以这种方式重写代码就足够了:

<img src={require('./Image/Checked.png')} height={50} width={50} />

问题是，经过几次更新后，语法发生了一点变化，现在对于图像，您需要使用默认属性才能使其正常工作。因此，对于新版本，您实际上必须使用此代码:

<img src={require('./Image/Checked.png').default} height={50} width={50} />

另一种实现相同想法的方法是导入图像，然后以这种方式使用它:

import Image from './Image/Checked.png'
<img src={Image}  height={50} width={50}/>

要仅在 svg 图像的情况下完成，您可以将它们导入为 React 组件并以这种方式使用它们:

import { ReactComponent as Image } from './Image/Checked.svg'
<Image />