Question

我不了解React中的import是如何工作的。我目前正在使用create-react-app。我在一个名为images的组件文件夹中有一个文件夹：

- src
  - components
    - images

在components文件夹里面我还有一个名为ProductSquare.js的js文件。我正在尝试使用此行从图像文件夹导入图片

import bumper from './images/bumper1.png';

我尝试将其更改为仅bumper1.png和许多其他选项。我在这做错了什么？（希望将来有更好的方法）。

这是程序员在现实世界中导入图片的方式吗？

Answer 1

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

P.S。类似的问题是here

Answer 2

如果您正在使用类似Webpack（create-react-app所做的）那么是，您可以只导入图像（以及大多数其他文件类型）。他们最终被转换为某种东西（我相信图像最终会成为数据URL）。

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

SRC
- 部件
- ProductSquare.js
- 图像

然后你应该可以使用这样的图像：

// 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

Answer 3

使用public文件夹

注意：此功能适用于react-scripts@0.5.0及更高版本。

在公共文件夹中创建一个文件夹，例如＆＃39; image＆＃39;，在那里添加照片。

在此之后，您可以使用以下图像地址：

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

Answer 4

<块引用>

你需要在 require 之后使用 .default

<img src={require('./images/bumper1.png').default} />

在本地导入图像

4 个答案: