React&VUE 动态require图片(转)


require

在React和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()

传入三个参数分别对应:

  • 路径
  • 是否向下级目录查找
  • 正则匹配
const context = require.context("../assets/image/", true, /\.(png|jpg)$/); // 相当于"../assets/image/ipad/img.jpg" context("./ipad/img.jpg");

指定上下文环境后,路径上可用变量

 
let type = "ipad"; // "../assets/image/ipad/img.jpg" context("./" + type + "/img.jpg");


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM