在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>
a.
import Logo from '/@/assets/logo.png'const importLogo = ref(Logo)
b.文件需要放在public文件夹
const importLogo3 = ref('/scene.jpg')
c.
onMounted(() => { import('/@/assets/logo.png').then((res) => { importLogo4.value = res.default }) })
d.
onMounted(() => { importLogo5.value = new URL('../assets/logo.png',import.meta.url) })
代码地址:https://gitee.com/yuexiayunsheng/vue3learn/blob/master/src/views/ImportImg.vue
标签:vue,assets,静态,几种,import,引入,logo,png From: https://www.cnblogs.com/foxing/p/17665194.html