vue的style绑定background-image url 写法

原创

ITCJF 2021-07-29 15:06:52 ©著作权

©著作权归作者所有：来自51CTO博客作者ITCJF的原创作品，请联系作者获取转载授权，否则将追究法律责任

注意图片路径，还有项目也要有引入相对路径@


<div  v-bind:style="{background: 'url(' ~@/assets/login_images/login_background.png ')'}">

</div>

上一篇：十大高明的Google搜索技巧

下一篇：Vue相关开源项目库汇总(史上最全)

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

在Vue中如何动态绑定class和style属性

在Vue中，动态绑定class和style属性是我们经常遇到的需求。这个功能允许我们根据不同的条件来动态改变元素的样式，让我们的应用更加灵活和富有交互性。在本篇博客文章中，我将带你深入探索在Vue中如何实现这一功能。

动态绑定 Vue 进度条
Vue3 - 表单的输入与绑定

Vue - 表单的输入与绑定输入框输入文本，对应以前都是操作DOM树结构进行的绑定。现在学习了VUE不建议大家通过DOM树进行绑定获取数据。需求一输入框输入文本，对应页面联动显示：<script>export default{ name: 'app', data(){ return{ username:"" } }}</script&

输入框表单 Vue
Vue2的双向数据绑定原理是什么

Vue2的双向数据绑定是Vue.js框架的一大亮点，它允许我们在模板中实现数据的动态更新和响应。当数据发生变化时，界面会相应地更新，而当用户在界面中的输入框中输入数据时，数据也会自动更新。这种双向的数据绑定机制让开发者在构建交互性强的应用程序时更加方便，提升了开发效率。

Vue 数据绑定数据
vue的style绑定background-image url 写法

.login-container { background: url(‘~@/assets/login_images/login_background.png’);

vue background-image 相对路径
background-image

CreateTime--2017年12月26日14:51:21 Author:Marydon background-image 1.background-image:url() 作用：设置背景图片语法： background-image:url(path) 说明： path既可以是相对路径又可以是

CSS css 渐变色滤镜
设置登录html背景 background-image: url();

background-image: url(图片的相对路径); 如： background-image: url(../static/images/背景.jpg); <style> body{ background-image: url(../static/images/背景.jpg); backg

代码
background-image: url(data:image/gif;base64,AAAA)

这算是一种图片路径的新写法。将图片进行编码，然后存在文档中。我先解释一下

服务器获取数据不兼容
background-image渐进式背景纯代码的写法

background-image: -webkit-linear-gradient(90deg,#ebf9ff 0,#fbfeff 100%);

qt
Vue项目中background-image属性设置方法

vue项目中background-image属性设置方法方式一：直接访问在vue-cli项目中的放在public目录下的资源会被直接复制，不会经过webpack的打包处理。<span class="item-icon"></span><style>.item-icon { width: 20px; height: 20px; background-size: 20px 20px; vertical-align: middle; /* 放置

Vue
vue css 背景图路径记得加波浪号 background-image: url(

vue css 背景图路径记得加波浪号 background-image: url("~@/assets/images/d.jpg"); 为什么不加波浪号，图片显示不出来哟

图片显示 css 背景图
关于background-image引发的问题

在写一个页面的时候，需要动态改变背景图，同时，在页面上做了一个session记录的hash，防外部提交。于是通过js去除原来的图片，如下$('.bg').css({'background-p_w_picpath':'url()'});于是，错误出现了，每次提交过去的hash和记录在session的值不同，表单提交被拒绝。找了很多地方，一直找不到原因，甚至怀疑浏览器有问题，因为有IE

职场休闲 js background-image
单击改变background-image jquery

## 单击改变`background-image`的jQuery在Web开发中，我们经常需要在用户与页面交互时改变元素的样式。在本文中，我们将介绍如何使用jQuery来实现在单击事件中改变元素的`background-image`属性。我们将提供详细的代码示例和解释，以帮助您理解和应用这一技术。### 准备工作在开始之前，我们需要确保您已经在项目中引入了jQuery库。您可以通过以下方

jQuery HTML 单击事件
CSS中使用background:url(地址)显示，但是background-image:url(地址)不显示的原因

问题描述CSS中使用background:url(地址)显示，但是background-image:url(地址)不显示的原因例如：下面的写法不显示图片background-image: url(../upload/bargain.png) no-repeat;下面的写法却显示图片background-image: url(../upload/bargain.png);background: url(../upload/bargain.png) no-repeat;问题原因因为back

css 显示图片背景图片其他
background-image属性image-set()和srcset

background语法：image-set() = image-set( <image-set-option># )<image-set-option> =

backgroundImage image-set background css3 srcset
jq点击修改背景background-image

正确写法：$(‘.jiaohuan_X’).css(‘background-image’,’url(“图片名称.png”)’); 记住url必须写错误写法 $(‘.jiaohuan_X’).css(‘background-image’,’(“图片名称.png”)’); 这边没有url是错误的，因为本身就是background-image 啊~~~~

点击换背景图片 css
css - CSS background-image: 当url有括号时不显示

圆括号冲突，加上引号引用url地址解决：background-image: url('http://xxxxxxxxx-(1)-600x600.jpg')

CSS
动态class,style,src绑定写法 vue

:class="{active:menuName===item.title}":style="thisTitle==='一张图展示'?styles:''":style="{'width':thisTitle==='一张图展示'?'360px':'272px'}":style="'height:'+cheight":src="utils.setImgSrc(item.imgSrc)":s

CSS vue
img 元素和 background-image 属性的区别

大家好，我是前端西瓜哥。今天带大家学习 img 元素和 background-image 属性的区别。img 是 HTML 元素，基本用法如下：<img src="./img.jpg" alt="图片描述" />background-image 则是一个 CSS 样式属性，用于设置元素的背景图片。.bg { background-image: url("./img.jpg");}im

css
background & background-image & border-image

background & background-image & border-imagecss, background, border-image, background-image, linear-gradient, linear, gradient

CSS background border-image linear-gradient
background-image和img的区别

background-img的时候外边的div必须有宽和高。并且你只能决定图片位于你div的位置不能拉伸图片，或者改变图片的宽高。但是background-image是可以重复的，所以只要你的图片不是固定的，完全没有问题。 img，不需要设置宽高，而且可以随意改变图片的宽高。

宽高
windows 2019 Datacenter 安装 docker windows server 安装docker

Docker安装Windows系统安装Docker为什么使用Windows安装版的docker？有时需要立即处理一些事项，使用虚拟机稍显麻烦，另外下载虚拟机安装各种系统占用空间比较大。Docker 并非是一个通用的容器工具，它依赖于已存在并运行的 Linux 内核环境。Docker 实质上是在已经运行的 Linux 下制造了一个隔离的文件环境，因此它执行的效率几乎等同于所部署的 Linux 主机。

docker 容器运维 Docker Windows
java ResponseCookie 设置多个cookie java操作cookie

Java操作Cookie之添加Cookie：Cookie cookie = new Cookie("name", "aotori"); //(key,value) cookie.setPath("/");// 这个要设置 // cookie.setDomain(".aotori.com");//这样设置，能实现两个网站共用 cookie.setMaxAge(36

Java System tomcat
java 读取达梦数据库sql语句达梦数据库执行sql文件

上一篇学习了达梦基本的执行计划下面接着学习复杂连接查询CREATE TABLE TEST5(ID INT); CREATE TABLE TEST6(ID INT); CREATE TABLE TEST7(ID INT); CREATE TABLE TEST8(ID INT); insert into test5 values(3); insert into test6 values(4); i

java 读取达梦数据库sql语句聚集索引内连接数据
设计RPC框架搭建rpc框架注意是什么

什么是RPC？In distributed computing, a remote procedure call (RPC) is when a computer program causes a procedure (subroutine) to execute in a different address space (commonly on another computer on a sha

设计RPC框架微服务 RPC Thrift 网络传输
arcgispro python 根据要素属性选择要素 arcgis按属性选择要素

ArcGIS 中的属性查询表达式符合数据库的 SQL表达式语法及规范，这里主要是WHERE 子句的使用，但使用不同存储类型的数据源，SQL语法也不完全相同，如果是MDB格式地理数据库，SQL的使用语法就是Access的语法；如果数据存储是Oracle数据库，则就是Oracle的语法。在ArcGIS下常用SQL语法如表11-1所列。表11-1 SQL的常用语法类型字符串空的判断模糊查询S

按属性选择模糊 SQL 字段数据库

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯