Vue 3 + TypeScript + Vite で画像を表示できたけど import 祭りになった

これでいいのか？　自問自答する、おばちゃんです。

ってか、おばちゃんが Vite にチャレンジするなど早すぎた。わからん、色々わからん・・・

イバラの道を歩み出したそもそもは、Swiper を使おうとしたら公式の Vue デモが Vite 使っていて、デモを丸コピペしたのが始まりだった。ラクかと思ったら、苦行になった. _l￣l○lll

Swiper Demos

swiper-pagination-vue - CodeSandbox

表題の「画像」というのは Swiper に使う JPEG 画像を配列にした時の事。画像が表示できない・・・

ネット検索してデキる人の記事を読むものの、おばちゃんのショボイ頭では理解ができない。ショックでしばらく寝込んでたのだけど、初心に戻ろうと Vite 公式を見返してみる。

Vite

ココだろう。たぶん。
で、下の記述を階層を変えては試し、@をつけたり、〜をつけたりを繰り返す。

import imgUrl from './assets/img.jpg'

あれ？　下に何か書いてある・・・

# 明示的な URL のインポート

import workletURL from 'extra-scalloped-border/worklet.js?url'

?url

・・・これか？　一か八か付けてみるか？？

import imgUrl from './assets/img.jpg?url'

<img :src="imgUrl" />

表示できた。いや、まだだ。安心はできない。勝負は build 後だ。よし、

yarn ビルドぉぉぉぉぉぉぉぉぉ！！！！！（build）

出来上がった dist の中を見ると、画像名に英数字が足されて入ってる。もしかしてモジュール化できた？
VScode の Extensions の Live Server で dist/index.html を表示させると、画像が無事入ってました（涙）

しかし、Swiper に使う JPEG 画像を全部 import で表記したら、import だらけになってしまった。
このやり方で本当にいいのか？　信用ならない、それが、おばちゃんクオリティ。