为什么react app不能正确加载本地图片

Question

我试图在react应用程序中加载本地图像而不使用import，因为如果我有100张图像，那将是不实际的。

我读了很多帖子，尝试了几乎所有的方法，但我不能让这个工作。

import React from 'react';
import ReactDOM from 'react-dom';
import ocean from './images/ocean.jpg';

这个作品:

const background = <img className='background' src={ocean} alt='ocean' />;

这行不通:

const background = <img className='background' src={'./images/ocean.jpg'} alt='ocean' />;

同样，这不起作用:

const background = <img className='background' src={require('./images/ocean.jpg')} alt='ocean' />;

Answer 1

您可以使用src={require('./images/ocean.jpg').default}

如果您使用require来导入您的图像，require返回一个ES模块而不是一个简单的字符串。这是因为在file-loader中，esModule选项默认是启用的。

由于您不想使用import，因此需要获取所需模块的default属性。