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. rabbitmq在kubernetes中持久化集群部署

    背景 Javashop电商系统的消息总线使用的事rabbitmq,在订单创建.静态页生成.索引生成等等业务中大量采用异步消息系统,这个对于mq高可用的要求有两个重要的考量: 1.集群化 2.可扩容 3 ...

  2. Postman之命令测试

    前言 今天我们来学习一下Postman的命令行测试 1.先安装node.js ,https://nodejs.org/en/#home-downloadhead 2.安装cnpm npm instal ...

  3. table-cell设置宽高、居中

    table-cell默认宽高由内容决定 <style type="text/css" rel="stylesheet"> .content { co ...

  4. centos7上安装docker社区版

    container(容器) docker(集装箱) 容器的优点 1. 启动速度快 2. 节省资源 3. 兼容性高 保证机器正常上网 #ping www.baidu.com CPU需要支持虚拟化 # g ...

  5. Leetcode：96. 不同的二叉搜索树

    Leetcode:96. 不同的二叉搜索树 Leetcode:96. 不同的二叉搜索树 题目在链接中,点进去看看吧! 先介绍一个名词:卡特兰数 卡特兰数 卡特兰数Cn满足以下递推关系: \[ C_{n ...

  6. [WPF 自定义控件]创建包含CheckBox的ListBoxItem

    1. 前言 Xceed wpftoolkit提供了一个CheckListBox,效果如下: 不过它用起来不怎么样,与其这样还不如参考UWP的ListView实现,而且动画效果也很好看: 它的样式如下: ...

  7. ES6 - 基础学习(1): 开发环境搭建

    现在Chrome浏览器已经很好的支持ES6了,但有些低版本的浏览器或其他浏览器还是不支持ES6的语法,因此实际项目开发或上线过程中就需要把ES6的语法转变成ES5的语法.项目开发过程中 Webpack ...

  8. opencv —— moments 矩的计算（空间矩/几何矩、中心距、归一化中心距、Hu矩）

    计算矩的目的 从一幅图像计算出来的矩集,不仅可以描述图像形状的全局特征,而且可以提供大量关于该图像不同的几何特征信息,如大小,位置.方向和形状等.这种描述能力广泛应用于各种图像处理.计算机视觉和机器人 ...

  9. MySql优化之mycat

    1. 解压mycat,不要放在有中文目录的地方  下载地址:http://dl.mycat.io/1.6-RELEASE/2 .修改mycat解压目录下的conf文件夹中server.xml文件,配置 ...

  10. 深入浅出 .NET C# 反射技术

    反射这个词听起来就很牛逼是吧? 嗯的确,反射是比较高级的特性,只有语言基础很扎实的Dev们才应该使用它. 搞点反射,可以提高程序的灵活性.可扩展性.耦合度. 反射这东西,是为了动态地运行时加载,相比于 ...