例如

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. cad.net之ACAD移植到GCAD的自动加载问题

    将acad.pgp,lsp,fas,vlx,名称增加一份gcad.pgp,lsp,fas,vlx.涉及系统加载用. Lisp的拖拉加载在gcad无法通过lastprompt获取命令历史栏最后一行(含路 ...

  2. js变量提升

    JavaScript的函数定义有个特点,它会先扫描整个函数体的语句,把所有申明的变量“提升”到函数顶部: 'use strict'; function foo() { var x = 'Hello, ...

  3. [0day]微软VS全版本DLL却持漏洞(VS2015 VS2013 VS2012 VS2010 VS2008)

    <无敌破坏王>大师兄说的 "我不是针对谁,而是在座的各位,都是垃圾"前几天在国外论坛看到一个VS2010 DLL却持漏洞 测试发现是全版本 实际上2014年在某越南黑客 ...

  4. POJ 2498

    #include<iostream> using namespace std; #include<string> #include<stdio.h> int mai ...

  5. Android四大组件之一 -- Service详解

    相信大多数朋友对Service这个名词都不会陌生,没错,一个老练的Android程序员如果连Service都没听说过的话,那确实也太逊了.Service作为Android四大组件之一,在每一个应用程序 ...

  6. Font Awesome 4.0.3 提供了369个网页常用的矢量字体图标,新浪、人人 的矢量图标也到其中哟

    要求 必备知识 本文要求基本了解html与css前端代码. 运行环境 普通浏览器,兼容IE7 源码下载 下载地址 Font Awesome 为您提供了一套可缩放的字体矢量图标,可以快速自定义图标的大小 ...

  7. tf.estimator.Estimator

    1.定义 tf.estimator.Estimator(model_fn=model_fn) #model_fn是一个方法 2.定义model_fn: def model_fn_builder(sel ...

  8. sql的存储过程实例--动态根据表数据复制一个表的数据到另一个表

    动态根据表数据复制一个表的数据到另一个表 把track表的记录 根据mac_id后两位数字,复制到对应track_? 的表中 如:mac_id=12345678910,则后两位10 对应表为track ...

  9. 面试:atoi和itoa的实现

    1.int atoi(const char* src) nullptr指针 空白字符' ','\t','\n' 符号位 避免值溢出 出错信息保存在全局变脸errnum中 ; int atoi(cons ...

  10. Tomcat学习总结(7)——Tomcat与Jetty比较

    Jetty 基本架构 Jetty目前的是一个比较被看好的 Servlet 引擎,它的架构比较简单,也是一个可扩展性和非常灵活的应用服务器. 它有一个基本数据模型,这个数据模型就是 Handler(处理 ...