为什么反应应用程序无法正确加载本地图像答案

【问题标题】：why react app cannot load local images properly为什么反应应用程序无法正确加载本地图像
【发布时间】：2021-07-28 22:47:45
【问题描述】：

我正在尝试在不使用 import 的情况下在 react 应用程序中加载本地图像，因为如果我有 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' />;

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：