在 Vue 3 组件中，通过 props 接收图标文件名并动态拼接 require() 路径时，需确保 Webpack 在构建阶段能静态解析路径——直接使用变量会导致编译失败；正确方式是使用模板字符串配合 require，且路径必须为相对静态字符串。
在 vue 3 组件中，通过 `props` 接收图标文件名并动态拼接 `require()` 路径时，需确保 webpack 在构建阶段能静态解析路径——直接使用变量会导致编译失败；正确方式是使用模板字符串配合 `require`，且路径必须为相对静态字符串。
在 Vue 3（尤其是基于 Vue CLI 或 Vite + Webpack 构建的项目）中，require() 是一个 Webpack 特有的运行时模块引入函数，但它仅支持静态路径分析。这意味着：require('./assets/icon01.png') 可被 Webpack 预先扫描并打包进资源，但 require('./assets/' + icon) 中的 icon 是运行时变量，Webpack 无法确定具体加载哪个文件，从而报错（如 Module parse failed: Unexpected character），甚至错误地尝试解析所有 .ico 等二进制文件。
✅ 正确写法（推荐）：
<script>
export default {
props: {
id: { type: [String, Number], default: null },
name: { type: String, default: '' },
icon: { type: String, default: 'default.png' } // 建议显式声明类型与默认值
}
}
</script>
<template>
<img :src="require(`../../assets/${icon}`)" :alt="name" />
</template>⚠️ 关键要点：
- 必须使用反引号（`）包裹的模板字符串，而非单/双引号，否则无法进行变量插值；
- 路径前缀（如 '../../assets/'）必须是硬编码的静态字符串，不能来自变量或计算属性；
- icon prop 值应为不带路径的纯文件名（例如 'home.svg'、'user.png'），且确保该文件真实存在于 src/assets/ 目录下；
- 若图标格式包含 .ico，请确认项目已配置对应 loader（如 file-loader 或 Webpack 5 的 asset/resource），否则会触发解析错误（这也是你看到 stop16.ico 报错的原因——Webpack 尝试解析未声明支持的二进制类型）。
? 进阶建议（提升健壮性）：
立即学习“前端免费学习笔记（深入）”；
-
添加路径校验逻辑（可选）：
computed: { resolvedIcon() { try { return require(`../../assets/${this.icon}`) } catch (e) { console.warn(`[Icon Load Warning] Asset not found: ${this.icon}, fallback to default.`) return require('../../assets/default.png') } } }模板中改用 <img :src="resolvedIcon" />。
-
更现代的替代方案（Vite 用户）：
若使用 Vite，推荐改用 new URL(..., import.meta.url) 动态导入，天然支持变量：<script setup> const props = defineProps({ icon: String }) const iconSrc = $computed(() => new URL(`../assets/${props.icon}`, import.meta.url).href) </script> <template> <img :src="iconSrc" /> </template>
? 总结：require(../../assets/${icon}) 能工作，并非因为“变量突然生效”，而是 Webpack（及 Vue CLI 内置配置）对带明确静态前缀的模板字符串做了特殊静态分析支持。这不是 JavaScript 运行时行为，而是构建工具的语法糖。务必保证路径结构一致、文件存在、格式受支持——这才是动态图标加载稳定可靠的根本。
