vue3 Jika anda menggunakan pembangunan skrip taip, require akan muncul Apabila memperkenalkan imej, mesej ralat dilaporkan, memerlukan tidak ditakrifkan Anda tidak boleh mengimportnya seperti imgUrl: require(’…/assets/test.png’) seperti menggunakan vue2 Ini kerana skrip taip tidak menyokong memerlukan
, jadi anda menggunakan import untuk mengimportnya. Berikut ialah cara menyelesaikannya: Gunakan await import(’@/assets/img/22.png’);
<template> <img :src="imgUrl" alt=""> </template> <script> import {ref, onMounted} from "vue"; export default { name: "imgPage", setup(){ onMounted(()=>{ handleImgSrc(); }) const imgUrl = ref(''); const handleImgSrc = async()=>{ let m = await import('@/assets/img/22.png'); imgUrl.value = m.default; }; return{ imgUrl } } } </script>
demo2.vue untuk mengitar semula nilai pulangan untuk meminta imej tempatan
<template> <img v-for="item in imgList" :src="getAssetsImages(item.url)" alt=""> </template> <script> import {ref, reactive, onMounted} from "vue"; export default { name: "imgPage", setup(){ const imgList = reactive([ {url: 'a.png'},{url: 'b.png'},{url: 'c.png'} ]) const getAssetsImages =(name)=> { return new URL(`/src/assets/pic/${name}`, import.meta.url).href; //本地文件路径 } return{ imgList , getAssetsImages } } } </script>
Rekodkan masalah yang dihadapi semasa menggunakan vue3 Mungkin ada cara lain untuk menyelesaikan masalah mengimport imej nasihat anda~
Projek terbaharu ialah vue3+vite Apabila menggunakan require untuk merujuk laluan imej, ralat ". memerlukan tidak ditakrifkan" dilaporkan, yang sangat memalukan. Kerana skrip taip tidak menyokong memerlukan, saya menggunakan imgUrl secara langsung: require(’ …/assets/test.png’) Ralat akan dilaporkan semasa mengimport. Anda perlu gunakan import untuk mengimport nilai untuk meminta imej tempatan
<template> <img :src="imgUrl" alt=""> </template> <script> import {ref, onMounted} from "vue"; export default { name: "imgPage", setup(){ onMounted(()=>{ handleImgSrc(); }) const imgUrl = ref(''); const handleImgSrc = async()=>{ let m = await import('@/assets/img/22.png'); imgUrl.value = m.default; }; return{ imgUrl } } } </script>
Atas ialah kandungan terperinci vue3+vite: Bagaimana untuk menyelesaikan ralat apabila menggunakan memerlukan untuk mengimport imej secara dinamik dalam src. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!