1、动态绑定图片

<img class="binding-img" :src="require('../assets/images/test.png')" />

2、动态绑定背景图

<div class="binding-bg" :style="{ 'background': 'url(' + require('../assets/images/'+bgDef) + ') no-repeat center center', 'background-size': '100% 100%'}">


<div class="binding-bg" :style="{ background: 'url(' + require('../assets/images/'+ testBg ? testBg : bgDef) + ') no-repeat center center', backgroundSize: '100% 100%'}">

vue动态绑定图片和背景图的更多相关文章

  1. 页面中图片以背景图形式展示好还是以img标签形式展示

    img和background-image的异同: img是网页结构层面上的标签,页面中多一个img标签就会多一次http请求,且当我们浏览页面时,img标签作为网页结构的一部分,会在浏览器加载结构的过 ...

  2. vue下登录页背景图上下空白处自适应等高

    遇到需求,登录页面需要顶部和底部上下等高,并且随着浏览器自适应上下高度. 解决方法: vue界面的data中先定义 data() { return { windowHeight: "&quo ...

  3. 在css中设置图片的背景图，怎么设置图片纵向拉伸

    css中设置背景图拉伸填充,在css2.1之前这个背景的长宽值是不能被修改的. 实际的结果是只能重复显示,可以使用repeat,repeat-x,repeat-y,no-repeat这些属性来控制背景 ...

  4. 移动端（视口(meta)，像素比，二倍图(图片，背景图，精灵图)，css初始化(normalize.css)，特殊样式，常见屏幕尺寸）

    1. 视口:(布局视口(layout viewport),视觉视口(visual viewport),理想视口(ideal viewport)) meta 视口标签 <meta  name = ...

  5. vue 生产环境 background 背景图不显示原因

    通常我们使用img标签引入文件,npm run build 打包后 ,因为img为html标签,打包后他的路径是由index.html开始访问的,他走static/img/'图片名'是能正确访问到图片 ...

  6. css背景图与html插入img的区别

    一直以来都认为css背景图与直接插入img图片的效果是差不多的,直到最近拜读了一位大神的作品,发现大部分图片都是通过背景图形式显示的,于是通过搜索各相关资料,在此总结了下二者的区别: 1. css中的 ...

  7. PS 抠图和添加背景图

    1.打开需要抠的图--然后使用套索类工具,魔棒类工具,钢笔类工具均可选择需要扣的图片范围任何在Delete(如果抠反了可以进行反选Ctrl +shift+I) 2.然后把任一一张背景图直接拖到PS里面 ...

  8. vue项目打包后css背景图路径不对的问题

    问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的 ...

  9. vue-cli构建的vue项目打包后css引入的背景图路径不对的问题

    使用vue-cli构建vue项目后,再打包遇到一个css引入的背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常 ...

随机推荐

  1. 关于ELF文件和BIN文件

    ELF文件执行过程 ELF文件有操作系统的加载器loader执行,比如linux,windows,对于3803处理器是grmon的load命令. 加载器会读取ELF文件program header,比 ...

  2. IIS停止服务 报错Connections_Refused

    IIS版本6.0  无故停止工作.         重启IIS 没有效果,必须重启web服务器.出现客户端无法访问Web服务器上的站点,错误信息提示为"页面无法显示"的情况.登录服 ...

  3. df du 文件空间管理 命令

     df  可以查看一级文件夹大小.使用比例.档案系统及其挂入点,但对文件却无能为力. du 可以查看文件及文件夹的大小.     df:常用   df -h    以易读形式显示 磁盘空间 linux ...

  4. webapi使用jwt做权限验证

    考虑到很多公司目前并没有切换到.netcore,所有本文尝试使用.netframework下的webapi 首先使用Nuget 安装 jwt包 安装完成后,创建 jwt的帮助类 public clas ...

  5. Gong服务实现平滑重启分析

    平滑重启是指能让我们的程序在重启的过程不中断服务,新老进程无缝衔接,实现零停机时间(Zero-Downtime)部署: 平滑重启是建立在优雅退出的基础之上的,之前一篇文章介绍了相关实现:Golang中 ...

  6. 学习分享--python网络爬虫（一）关于如何更新python pip以及如何安装python requests库

    一.python pip的更新(我的是window10 界面可能不太一样)    1.找到电脑左下角开始按钮,并点击: 2.输入cmd 3.打开以后,先查看自己的pip版本  输入:pip -V 敲回 ...

  7. scrapy的useragent与代理ip

    scrapy中的useragent与代理ip 方法一: user-agent我们可以直接在settings.py中更改,如下图,这样修改比较简单,但是并不推荐,更推荐的方法是修改使用scrapy的中间 ...

  8. Hadoop搭建record下

    前言 先说一下当前环境:Ubuntu18.04 jdk1.8 Hadoop选用-2.6.0-cdh5.15.1 用户名:supershuai-VirtualBox Hadoop的下载地址:http:/ ...

  9. cesium1.63.1api版本贴地贴模型量算工具效果(附源码下载)

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材.不少 ...

  10. navicat连接异常 authentication plugin 'caching_sha2_password' 问题解决

    mysql 8.0 默认使用 caching_sha2_password 身份验证机制 -- 从原来的 mysql_native_password 更改为 caching_sha2_password. ...