Vue 動態圖片加載路徑問題和解決方法

最近在作一個樹形結構的組件，使用了Vue和element UI中el-tree組件。由於樹中每一個節點都須要顯示一個圖標圖片，而且須要根據後臺傳入的數據類型動態地顯示，因此圖片的路徑須要動態地加載。下面是核心組件代碼：

<el-tree :data="data" class="tree-view" node-key="id" :props="defaultProps" @node-click="click" :default-checked-keys="[1]">
            <span class="custom-tree-node" slot-scope="{node, data}">
            <img v-if="data.iconSkin != undefined" :src="data.iconSkin" style="margin-right: 0.3em; " />
            <span @click="getChildNodes(data.id) ">{{ node.label }}</span>
            </span>
</el-tree>

後臺交互使用了vuex和axios，本篇文章後臺數據沒有問題，因此不作展現了。後臺傳入的數據結構是這樣的：

{
    "id": "2|299|0",
    "open": false,
    "maxStatus": 0,
    "iconSkin": "res1",
    "name": "test",
    "children": [],
    "parent": false
}

Vue中動態加載圖片須要使用require，這個不少文章都有介紹。具體能夠參考這篇文章vue的 v-for 循環中圖片加載路徑問題。

一開始我認爲直接在後臺傳入完整的js語句就能加載，因此我把後臺傳入的數據iconSkin寫成了完整的路徑。也就是require(@/assets/resourceimage/res1.png)，具體代碼跟最上面的代碼片斷一致。

原本覺得這樣就能加載成功了，打開chrome查看發現圖片裂開了，也就是圖片獲取失敗了。檢查HTML元素，發現圖片的路徑是字符串。

這是由於js在解析對象的時候並不會把字符串當成js對象去解析，所以解析出的路徑顯示成了字符串。在屢次嘗試和查資料之後我找到了幾個解決方案

方案一：在src路徑寫require

這個方案比較簡單，<img v-if="data.iconSkin != undefined" :src="require(@/assets/resourceimage/${data.iconSkin}.png)" style="margin-right: 0.3em; " />

只要保證數據是正確的，這個方案是徹底能夠的。

方案二：使用computed

computed是Vue裏的計算屬性，computed會在state數據更新時自動計算。

computed: mapState({
        tree: function(state) {
            const data = state.resTree.treeResult;
            if (data != null) {
                const result = state.resTree.treeResult;
                return result.data;
            }
        }
    })

可是注意，此時不能使用方案一那樣的形式了，應該將computed的數據綁定在組件上，而後經過v-for的方式進行調用。以element-UI的el-tree組件爲例，咱們能夠這樣寫：

<el-tree :data="tree" class="tree-view" node-key="id" :props="defaultProps" >
            <span class="custom-tree-node" slot-scope="{node, tree}">
                <img :src="getUrl(`${node.icon}`)" style="margin-right: 0.3em; " />
                <span>{{node.label}}</span>
            </span>
        </el-tree>
<script>
methods: {
    getUrl(url) {
        return require(`@/assets/resourceimage/${url}.png`);
    }
}
</script>

這個用法比較簡單，它把computed的計算結果——也就是tree綁定到el-tree的data上，這樣就可使用內部的node使用tree中的數據了。

切記不要使用下面的記住寫法：

1. require('@/assets/resourceimage/'+${node.icon}'+'.png');
2. require('@/assets/resourceimage/'+{{node.icon}}'+'.png');