例如

data () {
return {
img: '../../images/jifen/index/img_list_default_pic.jpg' //路径也没问题啊,怎么不显示呢,难道他瞎啦!
}
}
然后在template中

<img :src="img" /> 

第一种解决方案是:简单粗暴型 使用绝对路径也就是带上域名即可 第二种解决方案是:非常智慧型 代码如下:
data () {
return {
img: require('../../images/jifen/index/img_list_default_pic.jpg') //加上require即可
}
}

另一种方式可以当做背景

<div :style="{backgroundImage: 'url(' + img + ')'}"></div>

 

或者直接在css中定义

background-image: url('../../images/jifen/index/img_list_default_pic.jpg');

vue 相对路径的图片 不显示问题的更多相关文章

  1. 根据url路径获取图片并显示到ListView中

    项目开发中我们需要从网络获取图片显示到控件中,很多开源框架如Picasso可以实现图片下载和缓存功能.这里介绍的是一种简易的网络图片获取方式并把它显示到ListView中. 本案例实现的效果如下: 项 ...

  2. 🍓 vue循环渲染本地图片不显示? 🍓

    teamList: [{ title: '大数据拍牌', imgUrl: './img/data.jpg', introduce: '5星服务:强烈推荐', cost: '15000', bail: ...

  3. MVC中根据后台绝对路径读取图片并显示在IMG中

    数据库存取图片并在MVC3中显示在View中 根据路径读取图片: byte[] img = System.IO.File.ReadAllBytes(@"d:\xxxx.jpg"); ...

  4. Vue src动态引入图片不显示问题

    使用vue动态引入图片显示失败,查看控制台,发现图片返回类型为text/html,这里我的图片是从后台服务器上获取的,如果你没有使用Vue的devServer.proxy 进行代理,可以光速移步百度 ...

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

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

  6. vue打包后js和css、图片不显示,引用的字体找不到问题

    vue打包后js和css.图片不显示,引用的字体找不到问题:图片一般都是背景图片. 一.vue打包出现js和css不显示问题: 1.不使用mode:'history' 2.使用mode:'histor ...

  7. 织梦dedecms5.7二级域名文章图片不显示修改方法.相对路径改为绝对路径的方法

    dedecms升级到5.7SP1后,开启二级域名,你会发现,在二级域名下的文章,上传的图片地址都是:二级域名+图片地址,这是相对路径.但是你的图片是默认上传在uploads里面的.应该使用绝对路径.这 ...

  8. vue打包后CSS中引用的背景图片不显示问题

    vue项目中,在css样式中引用了一张背景图片,开发环境下是可以正常显示,build之后背景图片不显示. 解决方法: 找到build/utils.js文件 修改成为如下所示内容:  添加红框中的内容即 ...

  9. dedecms5.7二级域名文章图片不显示修改方法.相对路径改为绝对路径的方法

    dedecms5.7(织梦CMS5.7)二级域名文章图片不显示修改方法.相对路径改为绝对路径的方法 dedecms升级到5.7SP1后,开启二级域名,你会发现,在二级域名下的文章,上传的图片地址都是: ...

随机推荐

  1. Codeforces 1058 D. Vasya and Triangle(分解因子)

    题目:http://codeforces.com/contest/1058/problem/D 题意:有一个大小为N*M的矩阵内,构造一个三角形,使面积为(n*m)/k.若存在输出三个顶点(整数). ...

  2. <转>(笔记)正则表达式的几种引擎

    这篇主要是基于<精通正则表达式>的一篇读书笔记,因为书还没看完,可能以后还会有相关的笔记.(工作以后看书的效率真的很低啊……) 正则引擎主要可以分为基本不同的两大类:一种是DFA(确定性有 ...

  3. 多个SpringMVC项目配置统一管理(来自于springCloud的统一配置思路)

    因公司项目分多个系统进行开发,而系统架构几乎完全一样,所以同样的配置文件会存在不同的系统中 当其中的某些配置需要修改时,就需要依次把所有系统中相关的配置都修改掉 纯耗时且没技术含量的体力活 所以借鉴S ...

  4. java环境的配置与安装(windows、macos、linux)

    一.windows下: 1.下载jdk:https://www.oracle.com2.安装教程:https://www.cnblogs.com/zlslch/p/5658399.html 二.mac ...

  5. Hive在drop表的时候报错

    问题背景: 在安装完Hive之后,初始化mysql是成功的,hive启动也是成功的,也能创建database,在database中也能创建表,也能查看表结构,但是在drop的时候就不行了,在hive ...

  6. Liferay-Activiti 企业特性功能介绍 (新版Liferay7)

    前言 如果你是开发者 你已经是多少次开发一个项目,一次次的用一些框架,一次次的写类似的重复的代码,一次次建表\写类和方法\写HTML\CSS\JAVASCRIPT,一次次测试,一次次的写Bug...如 ...

  7. [原创]K8飞刀20160613 Plesk密码 & 注册表16进制转换 & Html实体解密

    K8飞刀  by K8拉登哥哥@[K8搞基大队]博客: http://qqhack8.blog.163.com 简介: K8飞刀是一款多功能的安全测试工具. Hacker Swiss Army Kni ...

  8. To B运营和To C运营到底有什么区别?

    无论To B还是To C运营其本质都是从目标用户转化为付费用户实现产品的变现,但是两者之间仍然存在一定的区别. 单纯从概念上来说,To B和To C的区别主要是从电商兴起的,并随着互联网的快速发展,T ...

  9. vue教程2-02 vue防止花括号{{}}闪烁,v-text和v-html、v-cloak

    vue教程2-02 vue防止花括号{{}}闪烁,v-text和v-html.v-cloak 一.v-text和v-html <span>{{msg}}</span>  --& ...

  10. dotnetcore+vue+elementUI 前后端分离 三(前端篇)

    说明: 本项目使用了 mysql employees数据库,使用了vue + axois + element UI 2.0 ,演示了 单页程序 架构 ,vue router 的使用,axois 使用, ...