vue3怎么用js添加动态背景图?
我这样写,test和img是有图片的,但是中间的两个div就一点效果都没有,也不报错。不知道是哪里的问题,网上有说使用require的,但是require在用的时候会报错require is not defined,不过原理应该也是转成一个url吧,这里试了一下也不行,这种背景图应该怎么加才对?
<script setup>
import bg from '@/assets/蒙版组 32.png'
const imgUrl = new URL('./img.png', import.meta.url).href
</script>
<template>
<div class="test-page">
<img :src="bg" alt="" />
test
<div :style="{ fontSize: '20px', backgroundImage: bg }">33</div>
<div :style="{ backgroundImage: imgUrl }">33</div>
<div class="test">11</div>
</div>
</template>
<style lang="scss" scoped>
.test {
background-image: url('@/assets/32.png');
}
</style>
回复
1个回答

test
2024-06-29
33那里写法有问题
<div :style="{ fontSize: '20px', backgroundImage: `url(${bg})` }">33</div>
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容