vue-cli 3.x 加载图片

以前是static，现在是public文件夹，在index.html里引用public的icon可以使用 插值

效果如图所示

而在vue单文件中引用public中的静态文件可以直接这么引用

这时路径很简单

也可以通过相对路径来设置public文件夹的内容

不过出现的是webpack编译后的路径

src中assets放置动态文件，可以用来编译解析输出
直接在vue模板文件里使用“@”开头的路径

效果如图，也是编译解析后的图片


这里的@是设置的alias，不过创建出来的目录里找webpack.config.js比较麻烦，我们可以命令行运行vue ui命令打开图形化界面，在任务的inspect中点击运行可输出webpack配置

在resolve中 alias 对象里设置了@的路径，所以编译的时候用到@都会以该路径为准

在js里可以在开头import图片文件

在vue单文件里，可以将值赋给data里的对应的属性

然后在模板直接绑定src赋值

编译解析结果如图

如果是动态加载图片以上的方法就不适用了，这时我们需要将图片的相对路径地址require进来

然后将require的结果赋给变量，从而输出图片

编译解析结果依旧喜人

关于ico也可以参考这篇浏览器图标引入vue项目中，通过webpack的配置设置输出icon

总之，图片可以在模板里写字符串地址，或者在js头部import进来，也可以js任何位置require进来

附上结构图片