为何Chakra-UI Avatar无法加载本地项目图片？如何解决？

原因 #

• React项目里直接写../images/logo.png这类相对路径作为图片源时，Webpack等打包工具不会处理该路径，浏览器会以当前页面URL为基准解析路径，而非项目文件结构，导致图片无法被找到。
• 并非Chakra-UI的Avatar组件只支持外部链接，它的src属性遵循原生img标签的资源加载规则，问题出在你没按React静态资源的正确加载方式操作。

解决办法 #

方法1：通过import引入图片 #

先在组件文件中导入目标图片，再将导入的变量作为src值传入：

import logo from '../images/logo.png';

// 组件内使用
<Avatar src={logo} alt="Logo" size={2} />

这种方式下，Webpack会自动处理图片资源，将其复制到打包后的输出目录，并生成正确的资源访问路径。

方法2：将图片放入public文件夹 #

把图片移到项目根目录的public文件夹中（比如public/images/logo.png），然后使用绝对路径作为src：

<Avatar src="/images/logo.png" alt="Logo" size={2} />

public文件夹下的资源会被直接复制到打包后的根目录，浏览器可以通过绝对路径直接访问到。

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