vue在div上动态引入背景图

最新推荐文章于 2024-05-24 14:07:14 发布
最新推荐文章于 2024-05-24 14:07:14 发布
阅读量872 收藏 1
点赞数
分类专栏： 动态引入背景图 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42577208/article/details/113307282
版权

1. 其实引入动态背景图很简单，但是方法要对,不然一直会报错。下面是正确的方法,在我尝试了各种方法后唯一成功的一种。

1、图片必须用require引入，然后跟上你的路径，之后在跟上你图片的名字参数

 <div class="myDesk-page"
         :style="{
       'background':  'url(' +
最低0.47元/天 解锁文章
Wan～naW
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于在Vue中实现动态背景组件
MoZhaoyun的博客
12-22 1135
关于在Vue中实现动态背景组件
vue 动态设置背景图片，并设置背景图片的渐变色
askuld的博客
07-20 7619
父div使用position:relative解决，子div使用position:absolute属性；四、如何将背景图片设置在右下角。采用绝对定位和相对定位解决问题。一、VUE动态设置背景图片。二、静态图片引入方式。三、设置背景图片渐变。
前端开发攻略---三种方法解决Vue3图片动态引入问题
最新发布
nibabaoo的博客
05-24 2673
解决Vue3图片动态引入问题
vue动态更改背景图
95后独自打拼的程序猿
03-20 1万+
文章目录前言一、要怎么做？二、使用步骤1.在data中写入数据2.添加背景图到div处总结 前言 例如：项目中我们需要动态改变背景图。 一、要怎么做？ 示例：1.首先我们要拿到数据中背景图数据 2.然后在你需要的添加背景图div出添加定义的style 二、使用步骤 1.在data中写入数据 代码如下（示例）： data: { //动态背景图片 bg: {backgroundImage: "url(" + ("./img/1.png") + ")"} } 2.添加背景图到div处 代码如下（示例
vue2和vue3分别实现同一页面（v-for动态渲染：img/div设置背景图片、鼠标悬浮展示按钮、高斯模糊等）
qq_37899622的博客
08-12 1983
vue2和vue3分别实现同一页面（v-for动态渲染：img/div设置背景图片、鼠标悬浮展示按钮、高斯模糊等）
vue-cli项目中动态设置div的background
吟游诗人——吟唱生命的不朽
01-28 2677
动态设置div的background是因为想着以后可以方便更改嘛，那么怎么设置呢？ 不多说废话了，直接上答案 下图给这个div设置了背景图片 这个IndexImgUrl是设置在data里的，不过也是有讲究的 请注意图片是放在static目录下，而不是asserts目录下的！！！ 因为编译后的文件目录格式其实已经改变了 如果是静态引用的图片可以放在asserts里面引用没问题，但是如果是要借助v...
Vue项目中设置背景图片方法
08-28
这个问题的出现主要是由于路径解析的问题，当我们在样式中添加了背景图片后，编译打包后，配置到服务器上时，图片并不能够正确的显示出来。 要解决这个问题，我们可以使用 Node 中的一种比较有效的方式来解决这个...
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
08-28
Vue+Vuex+Axios+ECharts实现动态更新中国地图的方法 本文主要介绍了使用Vue、Vuex、Axios和ECharts来实现动态更新中国地图的方法。下面是该方法的详细说明： 一、生成项目及安装插件 首先，需要使用Vue CLI生成一...
前端vue-cli项目中使用img图片和background背景图的几种方法
12-30
一种是图片资源引入方式,有时候使用绝对或者相对路径会导致错误. css方法 正常使用background属性即可. 如有问题,应把图片资源放入static静态资源文件夹,不是assets之类的其他文件夹. <div class=bgImg></div> &lt...
Vue图片与文字混输的实现方法
10-15
通过使用`contenteditable`属性和Vue的`ref`绑定，以及通过JavaScript动态创建和操作DOM元素，我们能够实现自定义的富文本编辑功能，而无需引入复杂的富文本编辑器插件。这种方法对于处理简单的需求是十分有效的，...
css背景图片添加url_CSS背景图片–如何向您的Div添加图片URL
cumi7754的博客
08-18 4638
css背景图片添加urlSay you want to put an image or two on a webpage. One way is to use the background-image CSS property. 假设您要在网页上放置一两个图片。 一种方法是使用background-image CSS属性。 This property applies one or more b...
vue中require引入图片或背景图
seimeii的博客
12-09 9924
<template> <div class="vote-container"> <div class="img" :style="{backgroundImage:'url('+src+')'}"></div> <img :src="src" /> </div> </template> <script> export default { data() { retur
vue.js div 设置背景图片
hhbbeijing的专栏
08-10 2万+
布局： &lt;div class="middle" :style="backgroundDiv"&gt; &lt;img src="./images/aibtn@3x.png" style="width: auto; height: 40px;"&gt; &lt;/div&gt; 数据： data() { return { backgr
vue动态引入图片
m0_68324632的博客
08-29 9148
这篇文章主要介绍了关于vue图片路径的处理问题，在我们想要动态加载图片路径时，由于vue的打包原理不同，我们也有不同的处理图片路径方法，希望对大家有所帮助。如有错误或未考虑完全的地方，望各位斧正。...
vue动态在页面添加背景图片
liukai6的博客
03-05 5474
&lt;div class="home-logo" :style="{backgroundImage:'url('+config.data.logo+')'}"&gt;&lt;/div&gt;
js+css让背景图片动起来
AndrewNeo
04-17 9148
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;css+js让背景图片动起来&lt;/title&gt; &lt;style&gt; *{ ma
纯CSS实现背景图片切换(CSS3伪类实现背景图片切换)
热门推荐
心有猛狗
09-30 2万+
跟着慕课网的教程学习了一下伪类 ，然后试着练习了一下用CSS伪类来实现背景图片切换。 先上一下效果图，当我点击圆圈里的缩略图的时候，背景图片就会变为与缩略图一样的图片。 要用到的伪类及其作用有： 1、nth-of-type()给每个文字块设置不同颜色。 2、::after 添加圆形缩略图的div 3、nth-of-type()配合::after添加缩略图 4、 ::befor 给圆形缩
vue给dom元素绑定动态背景图
周金鱼啊
07-28 1151
<div:style="{background:'url('+this.apiUrl+'/api/system/file/getImage?id='+sysInfo.indexImageLoginId+')'}"></div>
vue3 class引入背景图片
09-07
在 Vue 3 中，你可以通过类的方式引入背景图片。以下是一个示例： 1. 首先，创建一个 CSS 文件，比如 `styles.css`，并在其中定义一个类来设置背景图片样式： ```css .background-image { background-image: url...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值