vue3+vite 動態引入圖片的幾種方式，解決打包后圖片路徑錯誤不顯示的問題

vite 官方默認的配置，如果資源文件在assets文件夾打包后會把圖片名加上hash值，但是直接通過 :src="imgSrc"方式引入並不會在打包的時候解析，導致開發環境可以正常引入，打包后卻不能顯示的問題.
這里我們先看看vite官方文檔的解釋：
https://vitejs.bootcss.com/guide/assets.html

我們看到實際上我們不希望資源文件被wbpack編譯可以把圖片放到public 目錄會更省事，不管是開發環境還是生產環境，可以始終以根目錄保持圖片路徑的一致，這點跟webpack是一致的.

看到這里，也許問題就解決了，如果在vite確實需要將靜態文件放在assets，我們再往下看：

這里我們先假設：
靜態文件目錄：src/assets/mdcImgs/
我們的目標靜態文件在 src/assets/mdcImgs/home/home_icon.png
嘗試過require動態引入， 發現報錯：require is not defind，這是因為 require 是屬於 Webpack 的方法

第一種方式（適用於處理單個鏈接的資源文件）

import homeIcon from '@/assets/mdcImgs/home/home_icon.png'

<img :src="homeIcon" />

第二種方式（適用於處理多個鏈接的資源文件）

推薦，這種方式傳入的變量可以動態傳入文件路徑！！

靜態資源處理 | Vite 官方中文文檔
new URL() + import.meta.url

這里我們假設：
工具文件目錄： src/assets/pubUse.js

// 獲取assets靜態資源
const getAssetsFile = function (url){
  // console.log('url===============', url);
  // 獲取文件夾下所有圖片名稱
  let files = import.meta.globEager('../assets/mdcImgs/*.png');
  let AllPics = Object.values(files).map((v) => v.default);
  // console.log('AllPics===============', AllPics);
  let isExist = 0;
  let imgSrc = '';
  // 遍歷所有圖片，判斷是否存在該url圖片
  AllPics.forEach( val => {
    let url2 = url.substring(0, url.indexOf('.'));
    // console.log('url2===============', url2);
    if(val.indexOf(url2) !== -1) {
      isExist += 1;
    }
  });
  // console.log('isExist===============', isExist);
  if (isExist !== 0) {
    // 頭像存在
    imgSrc = url;
  } else {
    imgSrc = 'test.png';
  }
  // console.log('imgSrc===============', imgSrc);
  return new URL(`./mdcImgs/${imgSrc}`, import.meta.url).href;
};
export default getAssetsFile

使用：

  import usePub from '/src/assets/pubUse';

  const usePub2 = usePub;

1、在html代碼里使用 usePub2

<img :src="usePub2(item.name + '.png')" alt="">

2、在setup方法里使用 usePub

item.imgSrc = usePub(item.name + '.png');

補充：如果是背景圖片引入的方式（一定要使用相對路徑，不然，開發環境正常，生產環境路徑錯誤）

.imgText {
  background-image: url('../../assets/images/1462466500644.jpg');
}

參考：https://www.jianshu.com/p/ddfb5a8b458b