ReactJS + Vite项目中图片引用失效问题求助

架构老林

2026-6-15

解决React组件图片引用的两个问题

一、网络图片导致页面空白的问题

问题原因

React中import语句用于导入本地文件或项目内模块，不能直接导入网络图片URL。强行导入会触发模块解析失败，导致组件无法正常渲染，最终页面显示空白。另外你的组件名使用小写topbar，React要求组件首字母必须大写，否则会被识别为原生HTML标签，同样会引发渲染异常。

解决方法

直接将网络URL赋值给img的src属性，无需import，同时修正组件名为大写：

const TopBar = () => {
    return (
        <div className="topbar">
            <div className="banner">
                <img src="https://konachan.net/images/konachan_net_sm_std.png" alt="banner" />
            </div>
        </div>
    );
}

export default TopBar;

二、本地图片引用报错的问题

问题原因

相对路径错误：你使用的./src/images/konochan.png是相对于项目根目录的写法，但组件内的相对路径需要以当前文件位置为基准。比如如果topbar.jsx在src/components目录下，引用src/images下的图片，正确路径应该是../images/konochan.png。
组件名未大写，同样会影响渲染。

解决方法

修正相对路径并统一组件名大写：

import image from '../images/konochan.png';
const TopBar = () => {
    return (
        <div className="topbar">
            <div className="banner">
                <img src={image} title='banner' alt="banner" />
            </div>
        </div>
    );
}

export default TopBar;