vue中显示静态图片怎么引用
有多种方法解决这个问题:
首先,如果使用的是img标签那么可以这样
data () {
return {
img: require('path/to/your/source')
}
}
然后在template中
<img :src="img" />
如果使用的是背景图的方式,那么
可以这样
data () {
return {
img: require('path/to/your/source')
}
}
<div :style="{backgroundImage: 'url(' + img + ')'}"></div>
或者直接在css中定义
background-image: url('path/to/your/source');
vue中显示静态图片怎么引用的更多相关文章
- 周记4——vue中动态添加图片无效、build上线后background-image路径问题
又是一个周五,又一周要过去了...很开心,这周遇到了vue中的一个比较常见的坑,网上随便一搜就有了很多解决方案...“幸运”的是,我选了一个带坑的方案...所以我觉得有必要记录一下这个“坑中坑”... ...
- Android 加载gif图片强大框架(支持预加载、缓存,还支持显示静态图片,一行代码全搞定)
之前项目中没有涉及到显示gif图片的功能,也没有着重研究过,最近项目中要用到显示gif图片,于是就在网上一顿搜,用过之后发现如下几个缺点. 1.加载大的gif图片会出现oom. 2.没有预加载和缓存功 ...
- mfc显示静态图片最简单的方法
一致都是研究如何调用opencv显示动态图片,但是很多时候在显示图标的时候,都是需要显示静态图片,现在将最简单的方法总结下: 1.添加picture控件 2.添加资源,要求为bmp 3.修改属性 结果 ...
- 在InternetExplorer.Application中显示本地图片
忘记了,喜欢一个人的感觉 Demon's Blog » 程序设计 » 在InternetExplorer.Application中显示本地图片 « 对VBS效率的再思考——处理二进制数据 Wo ...
- vue中动态引入图片为什么要是require, 你不知道的那些事
相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...
- vue-cil和webpack中本地静态图片的路径问题解决方案
1 本地图片动态绑定img的src属性 一般我们在html中或者vue组件文件中引用图片是这样,这是不需要做特别处理的 我们将图片放入assets中或者重新建立个文件夹img什么的都可以,随意- 但是 ...
- vue-cil 和 webpack 中本地静态图片的路径问题解决方案
1.小于8K的图片将直接以base64的形式内联在代码中,可以减少一次http请求. 2.大于8k的呢?则直接file-loader打包, 这里并没有写明file-loader.但是确实是需要安装,否 ...
- 基于FPGA的VGA显示静态图片
终于熬到暑假了,记过三四周的突击带考试,终于为我的大二画上了一个完整的句号,接下来终于可以静心去做自己想做的事情了,前一阵子报了一个线上培训班,学学Sobel边缘检测,之前一直在学习图像处理,但是因为 ...
- FPGA驱动VGA显示静态图片
一 .前言 本文设计思想采用明德扬至简设计法.VGA是最常见的视频显示接口,时序也较为简单.本文从利用显示屏通过VGA方式显示测试图案及静态图片着手带大家接触图像显示应用,算是为后续VGA显示摄像头采 ...
随机推荐
- Java之ArrayList自定义排序,通过实现comparator比较器接口
两种排序方式: 1.实体类实现Comparable接口,重写compareTo(T o)方法,在其中定义排序规则,那么就可以直接调用Collections.sort()来排序对象数组 2.在调用方法的 ...
- MySQL函数GROUP_CONCAT
该函数返回带有来自一个组的连接的非NULL值的字符串结果.该函数是一个增强的Sybase SQL Anywhere支持的基本LIST()函数. 语法结构: GROUP_CONCAT([DISTINCT ...
- jaxp的dom方式操作(查找、添加、修改、删除、遍历节点)
package cn.itcast.jaxptest; import java.io.IOException; import javax.xml.parsers.DocumentBuilder;imp ...
- Lodop打印如何隐藏table某一列
Lodop打印超文本,既可以打印页面上存在的某些部分,也可以自己组织超文本和css样式传入,有些需要打印的页面表格里,会有一列有编辑删除等按钮,用于对于数据库数据的操作,在打印的时候,这一列由于不属于 ...
- C-Lodop提示“有窗口已打开,先关闭它(持续如此请刷新页面)!”
c-lodop显示“有窗口已打开,先关闭它(持续如此时请刷新页面)!”如果连续执行多个预览语句等导致的,可以预先判断一下,并可以自定义修改窗口已打开的提示,该默认提示的位置如本博客的下图http:// ...
- 学习 Spring (十五) Advisor
Spring入门篇 学习笔记 advisor 就像一个小的自包含的方面,只有一个 advice 切面自身通过一个 bean 表示,并且必须实现某个 advice 接口,同时 advisor 也可以很好 ...
- mac上录制无声mp3
想要录制音频很多方法,要无声音频 你可以使用调试软件 那么mac的录制音频,可以用这个软件 将耳机插头插在话筒插孔内,录制出来了m4a文件, 进入转换网站 开始转换下载
- 使用Golang打造自己的http服务器 1.0版本
package main import ( "io/ioutil" "net/http" "os" ) func main() { args ...
- UOJ274 [清华集训2016] 温暖会指引我们前行 【LCT】【最大生成树】
题目分析: 差评,最大生成树裸题.hack数据还卡常. 代码: #include<bits/stdc++.h> using namespace std; ; struct LCT{ ],d ...
- 深入浅出QOS详解(转)
QOS学习笔记 (工作时间之余,总结了这些,累的食指快脱节了,现在还在恢复中,为的就是让文章质量再提高点,希望对大家有帮助!文章太长,为方便,我附件上文章原文.) QOS,服务质量.顾名思义,就是为了 ...