VUE 非原生標籤（img等）標籤src屬性的相對路徑在熱更新時解析錯誤問題的解決(使用bootstrap-vue框架)

Airmusic發表於2017-09-09
Vueboot框架

在使用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>

相關文章