VUE 非原生标签（img等）标签src属性的相对路径在热更新时解析错误问题的解决(使用bootstrap-vue框架)

2024年3月5日 180次阅读 来源: Airmusic

在使用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>
    原文作者：Airmusic
    原文地址: https://segmentfault.com/a/1190000011090441
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞