有多种方法解决这个问题:

首先,如果使用的是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中显示静态图片怎么引用的更多相关文章

  1. 周记4——vue中动态添加图片无效、build上线后background-image路径问题

    又是一个周五,又一周要过去了...很开心,这周遇到了vue中的一个比较常见的坑,网上随便一搜就有了很多解决方案...“幸运”的是,我选了一个带坑的方案...所以我觉得有必要记录一下这个“坑中坑”... ...

  2. Android 加载gif图片强大框架(支持预加载、缓存,还支持显示静态图片,一行代码全搞定)

    之前项目中没有涉及到显示gif图片的功能,也没有着重研究过,最近项目中要用到显示gif图片,于是就在网上一顿搜,用过之后发现如下几个缺点. 1.加载大的gif图片会出现oom. 2.没有预加载和缓存功 ...

  3. mfc显示静态图片最简单的方法

    一致都是研究如何调用opencv显示动态图片,但是很多时候在显示图标的时候,都是需要显示静态图片,现在将最简单的方法总结下: 1.添加picture控件 2.添加资源,要求为bmp 3.修改属性 结果 ...

  4. 在InternetExplorer.Application中显示本地图片

    忘记了,喜欢一个人的感觉 Demon's Blog  »  程序设计  »  在InternetExplorer.Application中显示本地图片 « 对VBS效率的再思考——处理二进制数据 Wo ...

  5. vue中动态引入图片为什么要是require, 你不知道的那些事

    相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...

  6. vue-cil和webpack中本地静态图片的路径问题解决方案

    1 本地图片动态绑定img的src属性 一般我们在html中或者vue组件文件中引用图片是这样,这是不需要做特别处理的 我们将图片放入assets中或者重新建立个文件夹img什么的都可以,随意- 但是 ...

  7. vue-cil 和 webpack 中本地静态图片的路径问题解决方案

    1.小于8K的图片将直接以base64的形式内联在代码中,可以减少一次http请求. 2.大于8k的呢?则直接file-loader打包, 这里并没有写明file-loader.但是确实是需要安装,否 ...

  8. 基于FPGA的VGA显示静态图片

    终于熬到暑假了,记过三四周的突击带考试,终于为我的大二画上了一个完整的句号,接下来终于可以静心去做自己想做的事情了,前一阵子报了一个线上培训班,学学Sobel边缘检测,之前一直在学习图像处理,但是因为 ...

  9. FPGA驱动VGA显示静态图片

    一 .前言 本文设计思想采用明德扬至简设计法.VGA是最常见的视频显示接口,时序也较为简单.本文从利用显示屏通过VGA方式显示测试图案及静态图片着手带大家接触图像显示应用,算是为后续VGA显示摄像头采 ...

随机推荐

  1. 集合之LinkedHashMap(含JDK1.8源码分析)

    一.前言 大多数的情况下,只要不涉及线程安全问题,map都可以使用hashMap,不过hashMap有一个问题,hashMap的迭代顺序不是hashMap的存储顺序,即hashMap中的元素是无序的. ...

  2. 用织梦建站如何去掉a这个目录,还有内容页的a

    1.另外建一个站点,将物理路径直接指向a即可. 2.去掉文章页生成的带a的路径: 只需要这一句话:  function='str_replace("/a","" ...

  3. oracle数据库备份和恢复

    参考地址:https://www.cnblogs.com/1175429393wljblog/p/9529334.html Oracle数据导入导出imp/exp 在cmd的dos命令提示符下执行,而 ...

  4. Nginx 如何处理上游响应的数据

    陶辉93 一个非常重要的指令 proxy_buffer_size 指令限制头部响应header最大值 proxy_buffering 指令主要是指 上游服务器是否接受完完整包体在处理 默认是on 也就 ...

  5. python基础数据类型—int、bool、字符串的常用方法

    1.int int为整型数据,主要用于计算和类型转化(将字符串转为数字) 常用方法 #bit_length()当用二进制表示数字时所用最少位数,如下十进制数12用二进制表示是1100(bin),所以# ...

  6. windows 动态库的封装以及调用

    1.一个程序从源文件编译生成可执行文件的步骤:预编译 -->  编译 -->  汇编 --> 链接(1)预编译,即预处理,主要处理在源代码文件中以“#”开始的预编译指令,如宏展开.处 ...

  7. ab与nc命令,tcpdump命令

    ab与nc命令,tcpdump命令 ab  -p post.txt  -T  application/json   "http://127.0.0.1:8083/main/index&quo ...

  8. Linux 部署KVM虚拟化平台

    简单介绍 KVM 是基于虚拟化扩展(Intel VT 或者 AMD-V)的 X86 硬件的开源的 Linux 原生的全虚拟化解决方案.KVM 中,虚拟机被实现为常规的 Linux 进程,由标准 Lin ...

  9. Android 控件绑定封裝

    最近刚开始写android 随便记录一下,以后还会修改 绑定ListView,Spinner 先创建绑定项: BaseItem public class BaseItem { public BaseI ...

  10. Hard Life UVA - 1389(最大密度子图 输出点集)

    题意: rt 解析: 我用的第二种方法... s向所有的边连权值为1的边 所有的点向t连权值为mid的边 如果存在u -  > v  则边向u和v分别连一条权值为INF的边 二分mid 用dfs ...