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. Golang robfig/cron 实现解析

    ​    robfig/cron是GO语言中一个定时执行注册任务的package,  最近我在工程中使用到了它,由于它的实现优雅且简单(主要是简单),所以将源码过了一遍,记录和分享在此. 文档:htt ...

  2. 08-SpringMVC02

    今日知识 1. 文件上传 2. ResponseBody和RequestBody 3. SpringMVC多视图 4. 静态资源的处理 文件上传 1. 导包,(commom.io , commons- ...

  3. css3 3d api

    perspective 人看东西的距离 perspective: 500; 越小3d效果越好 perspective-origin观察视点.此处默认为视图的中心点 transform-origin:2 ...

  4. 20200110--python学习第八天

    今日内容 进制 对于计算机而言无论是计算机存储或是网络传输输入的本质都是:二进制:例如电脑上存储的视频/图形/文件/微信/qq的表情包/小视频都是二进制. 二进制:计算机内部 八进制: 十进制: 十六 ...

  5. mongoDB常用命令与安全加固

    一.介绍 MongoDB 是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案.MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系 ...

  6. 使用Unicode(宽字节字符集)；多字节字符集中定义宽字节变量

    2012-03-25 14:54 (分类:计算机程序) 2.2 宽字符和C 宽字符不一定是Unicode.Unicode是宽字符集的一种.然而,因为本书的焦点是Windows而不是C执行的理论,所以书 ...

  7. Java基础环境配置及HelloWorld

    一.什么是JDK,JRE JDK(Java Development Kit Java开发工具包) JDK是提供给Java开发人员使用的,其中包含了java的开发工具,也包括了JRE.所以安装了JDK, ...

  8. Django 系列

    Django基础 Django框架简介 Django 静态文件 Django request对象与ORM简介 Django路由系统 Django之视图层 Django之模板层 Django的setti ...

  9. 05.JS函数

    前言: 学习一门编程语言的基本步骤(01)了解背景知识(02)搭建开发环境(03)语法规范(04)常量和变量(05)数据类型(06)数据类型转换(07)运算符(08)逻辑结构(09)函数9.函数——f ...

  10. AndroidStudio更新时报错：Connection Error,Temp directory inside installation

    场景 在将Android Studio的 .AndroidStudio目录修改为别的目录后,打开AS,提示更新,点击更新后提示: Connection Error,Temp directory ins ...