vue中引入图片等静态资源的几种方式-526互联

在vue中引入图片等静态资源，由于部署的时候需要打包，打包后文件名字路径不一致，导致显示不了。以下为解决的几种方式：

1.样式直接引入：　

 <div class="imgItem">
    <div class="imgLogo"></div>
</div>


.imgLogo {
    width: 100px;
    height: 100px;
    background: url('/@/assets/logo.png');
    background-size: cover;
}

2.作为变量引入

<div class="imgItem">
   <div :style="{ backgroundImage: `url(${importLogo})` }" class="imgLogos"></div>
</div>

import Logo from '/@/assets/logo.png'

const importLogo = ref(Logo)

b.文件需要放在public文件夹

const importLogo3 = ref('/scene.jpg')

onMounted(() => {
    import('/@/assets/logo.png').then((res) => {
        importLogo4.value = res.default
    })
})

onMounted(() => {
    importLogo5.value = new URL('../assets/logo.png',import.meta.url)
})

代码地址：https://gitee.com/yuexiayunsheng/vue3learn/blob/master/src/views/ImportImg.vue