前端图片路径：变量赋值与直接引用的差异

在前端项目中，图片加载有时会出现这样的问题：直接在src属性中写图片路径可以正常显示，但使用变量赋值后却加载失败。这主要与构建工具（如Webpack）的编译机制有关。

直接在src属性中写路径（例如src="@/assets/images/logo.png"），构建工具会在编译阶段解析并处理该路径。根据配置，小图片可能被转换成base64编码嵌入HTML，大图片则会被复制到输出目录（例如/dist/img/），并更新路径。

然而，如果将路径赋值给变量：

<code class="javascript">let imagePath = '@/assets/images/logo.png';</code>

再在src属性中使用该变量：

科学计算器在线使用工具代码

html5 css3制作在线科学计算器ui布局，3D计算器面板，加减乘除数字计算器工具特效。

下载

立即学习“前端免费学习笔记（深入）”；

<code class="vue"><img src="https://img.php.cn/" alt="前端图片路径赋值：变量赋值与直接书写，为何图片加载结果不同？
" /></img></code>

构建工具不会解析变量imagePath中的路径，而是直接输出变量的值'@/assets/images/logo.png'。构建完成后，这个路径在输出目录中不存在，导致图片加载失败。

构建工具只处理编译阶段可识别的静态资源路径，而不会处理运行时动态生成的路径。 因此，为了确保图片正确加载，需要让构建工具在编译阶段处理图片路径。