前端图片路径：变量赋值与直接引用的差异
在前端项目中，图片加载有时会出现这样的问题：直接在src属性中写图片路径可以正常显示，但使用变量赋值后却加载失败。这主要与构建工具（如Webpack）的编译机制有关。
直接在src属性中写路径（例如src="@/assets/images/logo.png"），构建工具会在编译阶段解析并处理该路径。根据配置，小图片可能被转换成base64编码嵌入HTML，大图片则会被复制到输出目录（例如/dist/img/），并更新路径。
然而，如果将路径赋值给变量：
let imagePath = '@/assets/images/logo.png';
再在src属性中使用该变量：
立即学习“前端免费学习笔记（深入）”；
@@##@@
构建工具不会解析变量imagePath中的路径，而是直接输出变量的值'@/assets/images/logo.png'。构建完成后，这个路径在输出目录中不存在，导致图片加载失败。
构建工具只处理编译阶段可识别的静态资源路径，而不会处理运行时动态生成的路径。 因此，为了确保图片正确加载，需要让构建工具在编译阶段处理图片路径。
