vue-cli3或者4中如何正确的使用public中的图片

标题说的很清楚了，就是要使用public中的图片

那么为什么要把图片放到public中呢，其实官网上面也说了，要么是需要动态引入非常多的图片，特别是小图标，如果放在assert中的话，会被webpack处理，很可能被打成base64混合到app.js里面

这样就导致这个js文件比较大，
因为动态引入，肯定是有很多不需要的图片，这样就有可能导致浪费，多下载了不需要的图片，所以就有把图片放public这么一说。
具体做法呢其实参照官方来就很靠谱，具体来贴下我自己的配置

` publicPath: process.env.NODE_ENV === "production" ? "/xxx/xx/xxx/xx/x/" : "/", //说明一下啊，这里的xx/xx/xx/就是你实际部署的路径，比如，我的部署路径是www.baidu.com/test/k1/k2/index.html ,那么这里就写 /test/k1/k2/

assetsDir: "static",

然后，具体使用中就如下

// 比如，xx组件

data() {

return {

publicPath: process.env.BASE_URL

};

},

computed: {

calcUrl() {

let dataState = this.dataStatus,

fruitNum = this.fruitNum;

return this.publicPath + "fruit/red.png";

}

},

`

这样就好了，做起来呢也不难是吧，之前在public哪里走了弯路，以为只需要写最后一个文件夹的名字就好，现在想想太傻逼了，哈哈。

好了，到此结束，如果有任何疑问或者错误，反应留言反馈！！

巴特西

vue-cli3或者4中如何正确的使用public中的图片

标题说的很清楚了，就是要使用public中的图片

最新文章

热门文章