vue 学习中坑(读取本地的图片,不展示的问题)

1,读取本地图片,是循环列表,通过绑定读取出来的图片

如果是在assets里面的图片资源需要require的

<img class="goods-image" :src="require('../assets/'+item.img)" alt="" />

或者

<img class="goods-image" :src="require('@/assets/'+item.img)" alt="" />

2,图片资源是静止的

<img src="./assets/4g.jpg" alt=""> // √

 编译后:<img src="/img/01.f0cfc21d.jpg" alt="">

常见的引入方式,路径是固定的字符串,图片会被webpack处理,文件若丢失会直接在编译时报错,生成的文件包含了哈希值

3,:src="item.img",如果采用改种方式,会报错的

<img :src="item.img" alt=""> // ×

// 编译后:<img src="./assets/4g.jpg" alt="">

错误的引入方式,使用:src调用了v-bind指令处理其内容,相对路径不会被webpack的file-loader处理

4,如果想要使用绝对的根路径的,一般引用的是public里面的资源,

用绝对路径引入时,路径读取的是public文件夹中的资源,任何放置在 public 文件夹的静态资源都会被简单的复制到编译后的目录中,而不经过 webpack特殊处理。
当你的应用被部署在一个域名的根路径上时,比如http://weixin70.yuanye.com/,此时这种引入方式可以正常显示

等我完全掌握vue.config.js配置再继续总结剩余的图片路径配置方式,例如<img :src="this.publicPath + 'images/4g.jpg'" alt=""> 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章