vue3 Si vous utilisez le développement dactylographié, il y aura une erreur lorsque require importe des images, require n'est pas défini et ne peut pas être comme Utilisez vue2 pour importer comme imgUrl : require(’…/assets/test.png’) car typescript ne prend pas en charge require
, donc import est utilisé Voici comment le résoudre : Utilisez wait import(&rsquo. ;@/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 Recyclez la valeur de retour pour demander des images locales
<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>Enregistrez les problèmes rencontrés lors de l'utilisation de vue3, il existe peut-être d'autres moyens pour résoudre le problème de l'introduction de l'image, et veuillez me donner quelques conseils~
Le dernier projet est vue3+vite lors de l'utilisation de require pour référencer. le chemin de l'image, l'erreur "require n'est pas défini" est signalée, ce qui est très gênant, car Typescript ne supporte pas require, j'ai donc utilisé directement imgUrl : require(’…/assets/test.png’) lors de l'import, une erreur sera signalée. Vous devez utiliser import pour importer. Enregistrez la solution :
<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><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>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
La différence entre vue2.0 et 3.0
Comment utiliser exiger
Quels sont les cycles de vie de vue3
Méthode d'implémentation de la fonction js barrage
Tutoriel sur la fusion de plusieurs mots en un seul mot
Comment utiliser l'expression de point d'interrogation en langage C
Quelle est la fonction du diviseur de fréquence
pycharm ouvre une nouvelle méthode de fichier
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
