Vue3+vite は静的リソースを処理し、サーバーが動的ループ画像を表示しない問題を解決します

知らせ：

        vue2+webpack では、通常、静的リソースを動的にレンダリングするために require が使用されます。ただし、vue3+vite では require 構文がサポートされていないため、require を使用すると未定義が報告されるため、静的リソースを動的にレンダリングするには import を使用することが公式に推奨されています。

実装方法: 静的リソースの動的レンダリング

vue2+webpack

静的リソースを導入するには require を使用します require(‘xxxx’ + variable)

  		<div
            :class="['tag-item', currentSystem == item.code ? 'activeTag' : '']"
            v-for="(item, index) in schoolTagsList"
            :key="index"
            @click="getCurrentTypeSchoolList(item)"
          >
            <img class="tag-icon" :src="require(`../../assets/img/${item.code}.png`)" alt="" /> 
            {
   
   { item.value}}
          </div>

vue3+vite

使用 new URL(url, import.meta.url)

Vite 公式 Web サイトの静的リソース処理新しい URL(url, import.meta.url)
import.meta.url: ESM のネイティブ関数は現在のモジュールの URL を公開します a >
JavaScript モジュールでネイティブ URL コンストラクターと組み合わせて使用​​すると、相対パスを通じて完全に解析された静的リソース URL を取得できます

注意してください

このURL 文字列は分析できるように静的である必要があります。 そうでない場合、コードは予約されているため、build.target が import.meta.url をサポートしていない場合は実行時エラーが発生します

 function test(name) {
  return new URL(`../${name}.png`, import.meta.url).href
}