Bagaimanakah penggunaan Vue3+TypeScript+Vite memerlukan untuk memperkenalkan sumber statik seperti imej secara dinamik?

Soalan: Cara menggunakan memerlukan untuk memperkenalkan sumber statik secara dinamik seperti imej dalam projek Vue3+TypeScript+Vite!

Penerangan: Apabila membangunkan projek hari ini (rangka kerja projek ialah Vue3+TypeScript+Vite), kita perlu memperkenalkan sumber statik secara dinamik , iaitu img Nilai atribut src bagi teg diperoleh secara dinamik Anda boleh terus memperkenalkan keperluan mengikut amalan lalu Kod berikut:

<img  class="demo lazy"  src="/static/imghw/default1.png"  data-src="require(`../../../assets/image/${item.img}`)"   : / alt="Bagaimanakah penggunaan Vue3+TypeScript+Vite memerlukan untuk memperkenalkan sumber statik seperti imej secara dinamik?" >

Tulis baris beralun dalam poskod dan laporkan ralat. . Mesej ralat ialah:

Nama "memerlukan" tidak ditemui. Adakah anda perlu memasang definisi jenis untuk nod? ts(2580)npm i --save-dev @types/node

Selepas pemasangan

dan menambah item konfigurasi npm i --save-dev @types/node pada fail konfigurasi TypeScript tsconfig.json, gesaan baris beralun hilang, tetapi "type":["node"] konsol penyemak imbas masih melaporkan ralat , dan mesej ralat adalah seperti berikut:

Penyelesaian:

Mari kita bincangkan kesimpulannya dahulu,

Anda tidak boleh menggunakan require untuk memperkenalkan sumber imej dalam Vite , kerana require di sini nampaknya merupakan keupayaan memuatkan yang disediakan oleh webpack Memandangkan kami tidak menggunakan webpack sebagai pembinaan alat projek, kami menggunakan Ia adalah Vite, jadi di sini anda mesti beralih kepada pemuatan sumber statik yang disediakan oleh Vite Arahan rasmi Vite pada bahagian ini ada di sini. Rakan yang berminat boleh membaca dokumentasi rasmi: Pemprosesan sumber statik dalam Vite;

Di sini kami memperhalusi penjelasan Penggunaan contoh di laman web rasmi adalah seperti berikut:

const imgUrl = new URL('./img.png', import.meta.url).href
document.getElementById('hero-img').src = imgUrl

Mungkin tidak mudah. untuk memahami. Secara ringkasnya

menerima sejumlah dua parameter, new URL parameter pertama ialah laluan imej , berikut ialah nilai yang sepadan dengan keperluan, parameter kedua ialah pembolehubah global vite, yang boleh difahami sebagai pengekodan keras terus dan letakkannya Projek ini kira-kira seperti berikut: import.meta.url

<img  class="t-desktop-icon lazy"  src="/static/imghw/default1.png"  data-src="getIcon(name)"   : / alt="Bagaimanakah penggunaan Vue3+TypeScript+Vite memerlukan untuk memperkenalkan sumber statik seperti imej secara dinamik?" >

diperkenalkan secara dinamik pada img

dan kaedah getIcon adalah seperti berikut template

function getIcon(name: string) {
    return new URL(`../../../../assets/images/svg/${name}`, import.meta.url).href;
}

Dengan cara ini, sumber statik seperti imej boleh diperkenalkan secara dinamik dalam Vue3+TypeScript+Vite

Atas ialah kandungan terperinci Bagaimanakah penggunaan Vue3+TypeScript+Vite memerlukan untuk memperkenalkan sumber statik seperti imej secara dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!