问在react中本地导入图像

EN

尝试使用<img src={require('./images/bumper1.png')} />

附言:类似的问题是here

如果你使用的是像“Webpack”这样的软件( create-react-app就是这么做的)，那么你可以直接导入图片(以及大多数其他类型的文件)。它们最终会被转换成某种东西(我相信图像最终会变成一个数据URL)。

如果您的文件夹结构如下所示：

• 源
  • components
  • ProductSquare.js
  • images

​

然后，您应该能够像这样使用图像：

// in ProductSquare.js
import React from 'react';
import bumper from './images/bumper1.png';

class ProductSquare extends React.Component {
  render() {
    return <img src={ bumper } />;
  }
}

如果不是，请仔细检查所有文件的名称是否与您认为的相同(检查拼写错误和其他错误)。

如果一切都是正确的，并且不能正常工作，那么可以尝试在类之前添加console.log(bumper)。然后：

• 如果它输出的字符串看起来像data:blahblah它应该工作
• 如果它输出未定义，图像可能没有正确命名
• 如果它不输出，您可能没有正确使用ProductSquare <

>F224>

使用public文件夹

注意:此功能在react-scripts@0.5.0及更高版本中可用。

在公共文件夹中创建一个文件夹，例如，'image'，在那里添加你的照片。

在那之后，你可以在任何你想要的地方使用镜像地址，如下所示：

<img className="img1" src="/image/pic.jpg" alt=""/>