Parcel.js在JS文件中为img元素设置src属性时路径解析异常问题

问题根因 #

Parcel 的资源路径解析逻辑仅在打包编译阶段静态扫描可识别的固定路径，你代码中用模板字符串动态拼接的资源路径不会被编译阶段的扫描逻辑捕获，对应的 svg 文件不会被处理到最终打包产物中，因此运行时会出现资源找不到的报错。

可行解决方案 #

方案1：静态导入后映射取值（适用于图标数量较少的场景） #

提前把所有需要用到的 svg 图标做静态导入，存入对象后动态取值：

// 先静态导入所有图标，Parcel 会正常识别这些路径并处理资源
import IconAdd from '../images/icon-add.svg'
import IconDelete from '../images/icon-delete.svg'
import IconEdit from '../images/icon-edit.svg'

const iconMap = {
  add: IconAdd,
  delete: IconDelete,
  edit: IconEdit
}

// 动态设置 src 时直接从映射表中取处理后的资源路径
image.setAttribute("src", iconMap[el])

方案2：批量 glob 导入（适用于图标数量较多的场景） #

用 Parcel 支持的 import.meta.glob 语法批量导入符合规则的所有图标：

// 批量导入所有icon开头的svg，eager参数表示直接同步加载所有资源
const iconModules = import.meta.glob('../images/icon-*.svg', { eager: true })

// 动态拼接key获取处理后的资源路径
const targetIcon = iconModules[`../images/icon-${el}.svg`]
image.setAttribute("src", targetIcon.default)

方案3：public 目录托管静态资源（适用于动态取值范围不确定的场景） #

把所有 svg 图标放到项目根目录的 public 文件夹下（没有就新建一个），Parcel 打包时会把 public 目录下的文件原封不动输出到产物根目录，直接用绝对路径引用即可：

// 假设图标放在 public/images 目录下
image.setAttribute("src", `/images/icon-${el}.svg`)

注意：如果项目部署在域名的子路径下，需要在 Parcel 配置中指定 publicUrl 为对应的子路径前缀，避免路径匹配错误。

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