前端图片加载：直接路径与变量赋值的差异分析
在前端开发中，图片加载问题时有发生。有时直接在src属性中写入图片路径可以正常显示图片，但使用变量赋值却导致加载失败。本文将解析这种现象背后的原因。
问题在于：直接在img标签的src属性中写入路径（例如src="@/assets/images/logo.png"）, 图片正常加载；而使用变量存储路径再赋值给src属性，图片加载失败。这与构建工具（如Webpack）的处理机制有关。
当路径直接写入src属性时，构建工具（例如Webpack）在编译阶段会识别并处理该路径。根据Webpack配置，小图片可能被转换为base64编码嵌入HTML，大图片则会被复制到输出目录（例如/dist/img/），并更新路径指向新位置。
然而，使用变量存储路径再赋值给src属性时，构建工具在编译阶段无法解析变量中的路径。它会原样输出到最终HTML文件中。这意味着，最终HTML中的src属性仍然指向'@/assets/images/logo.png'这样的相对路径，但在打包后的目录结构中该路径不存在，导致图片加载失败。
立即学习“前端免费学习笔记（深入）”；
根本原因在于构建工具对字面量路径和变量路径的处理差异。字面量路径在编译阶段被处理，而变量路径则不会。解决方法是确保变量中的路径在编译后也正确，这可能需要调整代码结构或构建工具配置。
