JS如何正确导入public文件夹图片 解决跨src目录导入报错

报错原因 #

你当前使用的项目构建工具（如Create React App、Vite的默认配置）为了规避非法资源引用、保障构建链路的可靠性，默认限制仅支持导入src目录内的模块文件，public目录位于src之外，所以直接使用import导入会触发该报错。

正确处理方案 #

方案1：直接引用public目录资源路径（推荐，符合public目录设计用途） #

public目录的设计定位就是存放无需参与构建编译的静态资源，构建完成后目录内的所有文件会直接输出到打包产物的根目录，你完全不需要通过import导入，直接在代码里引用资源的绝对路径即可：

// 直接在标签里使用路径，不需要提前import
<img src="/logo.png" alt="站点logo" />

如果你的项目部署在域名子路径下，需要拼接构建工具提供的基础路径变量：

• Create React App项目：

<img src={`${process.env.PUBLIC_URL}/logo.png`} alt="站点logo" />

• Vite项目：

<img src={`${import.meta.env.BASE_URL}/logo.png`} alt="站点logo" />

方案2：把图片移入src目录内使用import导入 #

如果你确实需要通过import引入图片（比如要做路径别名绑定、构建时压缩处理等），可以把logo.png移动到src目录下，比如存放到src/assets/images/路径下，再用相对路径导入即可：

// 根据你实际的文件路径调整相对路径即可
import logo from "../assets/images/logo.png";

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