vue3 动态的导入图片 vue3 如果使用的是typescript开发，就会出现require引入图片报错，require is not defined 不能像使用vue2 这样imgUrl: require(’…/assets/test.png’) 导入，是因为typescript不支持require 所以用import导入，下面介绍如何解决： 使用await import(’@/assets/img/22.png’);

demo.vue

<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>

记录一下使用vue3遇到的问题，或许还有别的办法解决图片引入问题，还请各位指教~

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。