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

首先,如果使用的是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. Yii2常用ActiveRecord用法

    1.多表连表查询与对象关联查询 public function getWmsCheck(){ return $this->hasOne(\core\models\WmsCheck::classN ...

  2. css繼承

    概念:就是上級設置了css屬性,下級默認有同樣的樣式,如果下級需要不一樣的樣式,那麼就需要單獨對下級設置. 範圍: font-family:字體 font-weight:粗細 font-size:尺寸 ...

  3. vscode git設置

    1.git官网https://git-scm.com/download/win 链接下载:64-bit Git for Windows Setup,不要下载Portable,体积太大了: 如果git官 ...

  4. Clover file list

    /Volumes/EFI//EFI: total 4 drwxrwxrwx 1 jianweiliu staff 512 Apr 20 12:17 APPLE drwxrwxrwx@ 1 jianwe ...

  5. linux环境 :LIBRARY_PATH, LD_LIBRARY_PATH区别

    参考: https://www.cnblogs.com/mylinux/p/4955448.html LIBRARY_PATH和LD_LIBRARY_PATH是Linux下的两个环境变量,二者的含义和 ...

  6. Express static 托管静态文件 理解

    今天偶尔看了一下服务端渲染,遇到了express.static, 在以前学习webpack配置服务端渲染时,也使用express.static 中间件,两者配置不太一样,由于当时也没有认真学,所以 一 ...

  7. Android 右上角菜单栏

    1 创建菜单栏 在res下新建menu文件夹,并且创建righttopmenu.xml righttopmenu.xml: <?xml version="1.0" encod ...

  8. Newtonsoft.Json 概述

    有时候,在前后台数据交互或者APP与后台交互的时候,我们通常会使用Json进行数据交互,为此会使用到Newtonsoft.Json.dll 这个类库,这个类库非微软官方,但是下载量已经超过了数十万次, ...

  9. windows 环境下通过运行快速启动程序

    在windows环境下,我们可以使用一些系统内置的快捷键来快速启动我们想要的应用程序,我这里举例几个我经常使用的,比如: 快捷键 功能说明 services.msc  查看系统服务 gpedit.ms ...

  10. django.db.utils.DataError: (1406, "Data too long for column 'gender' at row 1")

    报错现象 在使用 django 创建 超级用户的时候提示报错 Password (again): ytyt521521 Traceback (most recent call last): File ...