图片有相同的文件名，优先使用webp格式图片-前端队长の技术博客

在vue2中有一个mixin.js文件，用来混入enum枚举和const常量，以及图片到所有的组件中。避免每次在组件中使用，需要import导入。

在此基础上增加一些代码，如果图片的文件名相同，则优先使用webp格式的图片。

代码如下：

/**
Description：
这里是vue2的混入方式，获取assets/img文件夹下的所有图片。
1、首先存储具有相同图片名的图片名称
2、对每个文件名进行处理，
3、以处理后的文件名为key，requireContext(file)为value赋值给imgObj
4、最后在main.js中mixin
*/

let requireContext = require.context("./../assets/img", false, /\.(jpg|jpeg|png|webp|svg|bmp)$/);

// 判断是否有重复的图片文件名
let repeatImg = {};
let repeatImgKeys = [];
requireContext.keys().forEach(file => {
  const fileName = file.replace(/^\.\/(.*)\.\w+$/, "$1");
  if (repeatImg[fileName]) {
    repeatImg[fileName]++;
  } else {
    repeatImg[fileName] = 1;
  }
});

for (const key in repeatImg) {
  const count = repeatImg[key];
  if (count > 1) {
    repeatImgKeys.push(key);
  }
}

let imgObj = {};
requireContext.keys().forEach(file => {
  const fileName = file.replace(/^\.\/(.*)\.\w+$/, "$1");

  // 格式示例：imgBgProduct
  let imgNameNew = file.replace(/\.\//g, "").split(".")[0];
  imgNameNew = "img" + _.upperFirst(_.camelCase(imgNameNew));

  // 优先使用webp图片
  if (repeatImgKeys.includes(fileName)) {
    if (file.includes("webp")) {
      imgObj[imgNameNew] = requireContext(file);
    }
  } else {
    imgObj[imgNameNew] = requireContext(file);
  }
  // console.log("⭐imgNameNew==>", file);
  // console.log("⭐imgNameNew==>", imgNameNew);
  console.log("⭐imgObj==>", imgObj);
});

const list = {
  data() {
    return {
      ...imgObj,
    };
  }
};

export default list;

在main.js中进行混入：

import mixin from "@/utils/mixin.js";

Vue.mixin(mixin);