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显示摄像头采 ...
随机推荐
- 集合之LinkedHashMap(含JDK1.8源码分析)
一.前言 大多数的情况下,只要不涉及线程安全问题,map都可以使用hashMap,不过hashMap有一个问题,hashMap的迭代顺序不是hashMap的存储顺序,即hashMap中的元素是无序的. ...
- 用织梦建站如何去掉a这个目录,还有内容页的a
1.另外建一个站点,将物理路径直接指向a即可. 2.去掉文章页生成的带a的路径: 只需要这一句话: function='str_replace("/a","" ...
- oracle数据库备份和恢复
参考地址:https://www.cnblogs.com/1175429393wljblog/p/9529334.html Oracle数据导入导出imp/exp 在cmd的dos命令提示符下执行,而 ...
- Nginx 如何处理上游响应的数据
陶辉93 一个非常重要的指令 proxy_buffer_size 指令限制头部响应header最大值 proxy_buffering 指令主要是指 上游服务器是否接受完完整包体在处理 默认是on 也就 ...
- python基础数据类型—int、bool、字符串的常用方法
1.int int为整型数据,主要用于计算和类型转化(将字符串转为数字) 常用方法 #bit_length()当用二进制表示数字时所用最少位数,如下十进制数12用二进制表示是1100(bin),所以# ...
- windows 动态库的封装以及调用
1.一个程序从源文件编译生成可执行文件的步骤:预编译 --> 编译 --> 汇编 --> 链接(1)预编译,即预处理,主要处理在源代码文件中以“#”开始的预编译指令,如宏展开.处 ...
- ab与nc命令,tcpdump命令
ab与nc命令,tcpdump命令 ab -p post.txt -T application/json "http://127.0.0.1:8083/main/index&quo ...
- Linux 部署KVM虚拟化平台
简单介绍 KVM 是基于虚拟化扩展(Intel VT 或者 AMD-V)的 X86 硬件的开源的 Linux 原生的全虚拟化解决方案.KVM 中,虚拟机被实现为常规的 Linux 进程,由标准 Lin ...
- Android 控件绑定封裝
最近刚开始写android 随便记录一下,以后还会修改 绑定ListView,Spinner 先创建绑定项: BaseItem public class BaseItem { public BaseI ...
- Hard Life UVA - 1389(最大密度子图 输出点集)
题意: rt 解析: 我用的第二种方法... s向所有的边连权值为1的边 所有的点向t连权值为mid的边 如果存在u - > v 则边向u和v分别连一条权值为INF的边 二分mid 用dfs ...