React组件本地图片无法加载问题求助

问题情况 #

在使用styled-components的React组件中，尝试通过import和require两种方式引入本地图片../img/bannerImage.jpg，图片始终无法加载，渲染后的img标签src属性分别显示[object Module]和[object Object]，但外部图片可以正常显示。

修复方案 #

1. 处理import引入方式 #

Webpack 5+（包括Create React App v5及以上版本）中，导入图片资源默认返回ES模块对象，需要访问其default属性获取实际的图片URL：

import bannerImage from '../img/bannerImage.jpg';
// 使用时
<img src={bannerImage.default} />

2. 处理require引入方式 #

使用require引入图片时，同样需要获取default属性来拿到图片URL：

<img src={require("../img/bannerImage.jpg").default} />

修改后的完整代码示例 #

import styled from 'styled-components';
import bannerImage from '../img/bannerImage.jpg';

const StyledBanner = styled.div`
    margin-top: 55px;
    width: 100%;
    height: 20px;
    background-color: red;
`;

function Banner() {
    return (
        <StyledBanner>
            <img src={require("../img/bannerImage.jpg").default} />
            <img src={bannerImage.default} />
        </StyledBanner>
    );
};

export default Banner;

原因说明 #

• [object Module]：ES模块规范下，导入的资源会被包装成模块对象，直接赋值给src会触发对象的字符串化，导致显示该内容。
• [object Object]：在ES模块环境中使用require，返回的也是包含default属性的对象，直接使用会出现同样的字符串化问题。

内容的提问来源于stack exchange，提问作者Rafael Bruno da Silva