vue中img标签的src属性总结(问题解决)
作者：小锅盖快跑
初步接触vue框架时,好多朋友使用img标签时,设置动态src属性时,可能都会遇到路径不生效的问题,本文给大家介绍vue中img标签的src属性总结,感兴趣的朋友一起看看吧
vue中img标签的src属性的使用
初步接触vue框架时,好多朋友使用img标签时,设置动态src属性时,可能都会遇到路径不生效的问题,咱们废话不多说,开整!!!
img标签引用资源图片
一般不需要webpack处理的资源放在static,需要经过处理的放在assets
1.不需要webpack处理的图片放在static
不需要webpack处理的图片,直接使用绝对路径调用图片,如"/static/xx/xxx.png"
栗子
html代码
<img v-bind:src="imgUrl"/>
js代码
data(){
return{
imgUrl:"/static/logo.png"
}
}成功读取到了logo.png. 执行npm run build后查看dist文件，发现logo.png原封不动地放在了根目录下。
2.需要webpack处理的图片放在assets
可以使用import还是require进行引入.import为es6语法,require为commonJS形式.
栗子1
<img class="logo-img" src="@/assets/images/logo.png" alt="logo" />
栗子2
<img :src="require('@/assets/images/sidederLogo.png')" class="sidebar-logo">栗子3
//HTML1
<img class="logo-img" :src="imgUrl" alt="logo" />
//JS
data(){
return{
imgUrl:require('./assets/logo.png')
}
}也可以直接引用网络路径
//HTML1
<img class="logo-img" :src="imgUrl" alt="logo" />
//JS
data(){
return{
imgUrl: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
}
}先总结到这里,后续遇到新的方法再补充,希望对你有帮助.
到此这篇关于vue中img标签的src属性总结的文章就介绍到这了,更多相关vue src属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！