当前位置: 首页 > 知识库问答 >
问题:

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

唐钊
2023-08-12

我这样写,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个答案

公西宏毅
2023-08-12

33那里写法有问题

    <div :style="{ fontSize: '20px', backgroundImage: `url(${bg})` }">33</div>
 类似资料:
  • 本文向大家介绍C#怎么给PDF添加背景图片,包括了C#怎么给PDF添加背景图片的使用技巧和注意事项,需要的朋友参考一下 今天要实现的是给PDF文件添加图片背景这个功能。PDF是近年来最流行的文件之一,无论是办公还是日常生活中都经常会用到,很多时候,PDF文件的背景色都是白色,看多了难免觉得累,更换PDF的背景不仅可以让眼睛看起来更舒服,还可以让PDF文件看上去更美观。如何实现?作为一名程序猿,当然

  • 例如现有数据结构: msg数组长度最大为10,超出的时候,新建id='a:1'后再向msg追加数据

  • 问题内容: 我有一个正在编写的CSS页面,我需要在一个类中应用背景图像,然后使用另一个类将一个局部透明的背景图像放在已经存在的背景图像之上。这只是一个简单的字眼,所以让我做一个示范。 在此示例中,第一个div应该具有背景图像1,第二个div应该具有背景图像1,但是滤镜图像位于其顶部,然后第三个div应该是图像2,第四个应该是图像2并且上面具有相同的滤镜。 但是,在此示例中,.backgroundF

  • 这个所属公司里面我想动态添加几个从接口获取的二级行业并且生成对应的路由点击跳转不同的页面,这个在vue3和vite项目中要怎么实现呢 就比如这种效果 我想的是先通过rouer.option.route获取route,然后再拿到这个所属公司这个route,其次再获取接口拿到接口数据,通过addroute添加进去路由里面,然后我试了下这个方案不太行,而且会重复添加,我也不能设置一个变量去防止他重复添加

  • 没看到哪个组件库是把样式写在.vue文件里的