vue中實現img設置src路徑爲本地圖片

在vue項目中有時候img標籤中引入的圖片是本地圖片，直接寫src路徑貌似根本加載不到，現在把解決方法記錄一下。

vue中引入本地路徑時可以使用數據的形式進行引入，先提前把圖片引入到當前vue文件中，在綁定到img的src屬性上，代碼如下

            <div class="searchbox">
                <span class="icon-search"><img :src="images.searchpng" alt=""></span>
                <input type="text" class="input-search" v-model="keyword" id="searchTxt" ref="searchTxt" placeholder="請輸入樓盤名稱" filterable  value="">
                <span class="search-x"><img :src="images.searchxpng" alt="" @click="clearInput"></span>
            </div>

script代碼

        data() {
            return {
                searchData:[],
                keyword : '',
                images: {
                    searchpng:require('@/pages/wap/assets/images/search.png'),
                    searchxpng:require('@/pages/wap/assets/images/search-x.png')
                }
            }
        },

說明@/pages/wap/assets/images/search.png 裏邊的@符號表示當前項目的src目錄

項目結構截圖看一下