脚本宝典收集整理的这篇文章主要介绍了VUE 非原生标签(img等)标签src属性的相对路径在热更新时解析错误问题的解决(使用bootstrap-vue框架),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
在使用bootstrap-vue框架时,bootstrap-vue的自定义组件如<b-img src=''>,<b-card img-src=''>中的相对图片地址在vue热更新时被解析成热更新的根目录地址下的图片路径,即项目目录下的static目录下,所以热更新是图片将会404。但是以http开头的地址不受影响。
<template>
<b-container class="myheader">
<b-row>
<b-col>
<b-card title="Card Title"
img-src='./back.jpg'
img-alt="Image"
img-top
tag="article"
style="max-width: 100%;"
class="mb-2">
</b-card>
</b-col>
</b-row>
</b-container>
</template>
上图中的back.jpg将不能在热更新时正确使用导致404,但在最终的生产环境build编译中不受影响,可以正常使用。但是这严重影响调试,因为总不能写一下代码想预览就非得编译并部署一次生产环境代码吧?太费时间。
解决方案:
图片属性绑定到vue的data或者其他属性,data属性中使用require引入图片
例如:
data(){
return {
backimg:require('./back.jpg')
}
并且所有需要的bootstrap-vue组件必须单独引入:例如:
import { bContainer, bRow, bCard,bCol } from '../../../node_modules/bootstrap-vue/lib/components'
最终效果:
<template>
<b-container class="myheader">
<b-row>
<b-col>
<b-card title="Card Title"
:img-src='backimg'
img-alt="Image"
img-top
tag="article"
style="max-width: 100%;"
class="mb-2">
</b-card>
</b-col>
</b-row>
</b-container>
</template>
<script>
import { bContainer, bRow, bCard,bCol } from '../../../node_modules/bootstrap-vue/lib/components'
export default {
name: 'myheader',
data(){
return {
backimg:require('./back.jpg')
}
},
components:{
bContainer, bRow, bCard,bCol
}
}
</script>
以上是脚本宝典为你收集整理的VUE 非原生标签(img等)标签src属性的相对路径在热更新时解析错误问题的解决(使用bootstrap-vue框架)全部内容,希望文章能够帮你解决VUE 非原生标签(img等)标签src属性的相对路径在热更新时解析错误问题的解决(使用bootstrap-vue框架)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。