VUE 動態require圖片

require

在vue裏，require路徑上無法使用變量(會因找不到上下文環境和查找失敗)，可通過require.context()解決。

變量在路徑上，require找不到上下文環境：
require("../assets/image/" + 變量 + "/img.jpg")

變量是最後的文件名或部分文件名，上下文環境找的到：
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()

傳入三個參數分別對應：

• 路徑
• 是否向下級目錄查找
• 正則匹配

context = require.context("../assets/image/ipad/", true, /\.(png|jpg)$/);
// 相當於"../assets/image/ipad/img.jpg"
context("./img.jpg");

指定上下文環境後，路徑上可用變量

// "../assets/image/ipad/" + 變量 + "/img.jpg"
context("./"+"變量"+"img.jpg");