vue3怎么用js添加动态背景图?

作者站长头像
站长
· 阅读数 10

我这样写,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个回答
avatar
test
2024-06-29

33那里写法有问题

    <div :style="{ fontSize: '20px', backgroundImage: `url(${bg})` }">33</div>
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容