vue中使用require動態(tài)獲取圖片地址方式

更新時間：2023年06月05日 17:12:31 作者：全蛋

這篇文章主要介紹了vue中使用require動態(tài)獲取圖片地址方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

使用require動態(tài)獲取圖片地址

項(xiàng)目場景

項(xiàng)目中根據(jù)圖片不同的后綴名，展示不同的圖片

問題描述

直接給圖片的src綁定圖片地址，圖片不顯示，使用 require('圖片本地路徑' + '地址變量' + '.png') 也不顯示

<img :src="require('@/assets/img/' + item.url + '.png')" alt="" />

原因分析

vue在DOM中直接引入的圖片會被轉(zhuǎn)為base64格式，但是使用變量引入的話，圖片不會轉(zhuǎn)為base64，所以不顯示

解決方案

使用require.context實(shí)現(xiàn)前端工程化引入文件

require.context(directory, useSubdirectories, regExp)

directory 檢索的目錄
useSubdirectories : 是否檢索子文件夾
regExp: 匹配文件的正則表達(dá)式，一般是文件名
mode: 加載模式。同步還是異步

require.context 執(zhí)行后，返回一個方法 webpackContext，這個方法又返回一個 __webpack_require__ , 這個 __webpack_require__ 相當(dāng)于require或者import。

同時webpackContext還有第二個靜態(tài)方法 keys與resolve，一個id屬性

keys：返回匹配成功模塊的名字組成的數(shù)組
resolve：接受一個參數(shù)request，request為test文件夾下面匹配文件的相對路徑，返回這個匹配文件相對于整個工程的相對路徑
id：執(zhí)行環(huán)境的id，返回的是一個字符串，只要用在module.hot.accpet,應(yīng)該是熱加載

主要代碼

const images = require.context("@/assets/test", false, /\.png$/);
        let imageURL = ''
        images.keys().forEach(key => {
          const name = path.basename(key, '.png')
          if (name === 圖片后綴名) {
            imageURL = images(key).default || images(key)
          }
        })
        return imageURL;

vue中require圖片失敗問題

在vue里，require路徑上無法使用變量(會因找不到上下文環(huán)境而查找失敗)，報依賴錯誤，可通過require.context()解決。

變量在路徑上，require找不到上下文環(huán)境：

// 錯誤
require("../assets/image/" + 變量 + "/img.jpg")

變量是最后的文件名或部分文件名，上下文環(huán)境找的到可以：

// 正確
require("../assets/image/ipad/" + "變量.jpg")
require("../assets/image/ipad/i" + "變量.jpg")
require("../assets/image/ipad/img" + "變量.jpg")
require("../assets/image/ipad/img.jpg")

require.context()

傳入三個參數(shù)分別對應(yīng)：

context = require.context("../assets/image/ipad/", true, /\.(png|jpg)$/);
// 相當(dāng)于"../assets/image/ipad/img.jpg"
context("./img.jpg");
//指定上下文環(huán)境后，路徑上可用變量
// "../assets/image/ipad/" + 變量 + "/img.jpg"
context("./"+"變量"+"img.jpg");