React无法加载图片及其alt文本问题求助

核心问题：Sidebar组件缺少return语句 #

你的Sidebar组件定义了JSX结构，但没有通过return语句返回内容，导致组件无法渲染任何元素，自然看不到图片和对应的alt文本。

修正后的Sidebar组件代码 #

import './index.scss';
import { Link } from 'react-router-dom';
import LogoS from '../../assets/images/logo-s.png';
import LogoSubtitle from '../../assets/images/logo_sub.png';

const Sidebar = () => {
    // 添加return包裹JSX内容
    return (
        <div className="nav-bar">
            <Link className="logo" to="/">
                <img src={LogoS} alt="logo" />
                <img src={LogoSubtitle} alt="slobodan" /> 
            </Link>
        </div>
    )
}

export default Sidebar

额外验证项 #

• 图片导入路径：从Sidebar所在的src/components/sidebar目录出发，../../assets/images/xxx.png的路径完全匹配你的目录结构，无需调整。
• 组件导入路径：Layout组件中./../Sidebar的导入路径是正确的（前提是Sidebar的主文件为sidebar/index.js）。
• 资源加载配置：在Create React App或Codesandbox环境中，默认支持直接导入图片资源，无需额外配置，修正return语句后即可正常加载。

内容的提问来源于stack exchange，提问作者Trephy