当前位置: 首页 > 工具软件 > src2png > 使用案例 >

vue3 src 用require 动态导入图片报错和解决方法

吕霄
2023-12-01

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遇到的问题,或许还有别的办法解决图片引入问题,还请各位指教~

 类似资料: