例如

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. Java内存溢出问题总结

    使用Java那么久,在此总结一下Java中常见的内存溢出问题以及对应的解决思路 堆溢出 报错信息 java.lang.OutOfMemoryError: Java heap space 报错原因 堆中 ...

  2. javascript 模块化学习:Class打包出来无法实例化问题

    菜鸟初学前端,第一次尝试使用webpack, 目的是做一个lib,想用webpack + babel 自动化打包出来 es5 的js代码 模块中用到了Class,直接export{className} ...

  3. zookeeper单机版安装

    ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提供一致性服务的软件,提供的功 ...

  4. Linux - APT包管理

    dpkg与apt dpkg用来安装本地deb格式软件包,但不会解决软件包的依赖关系. APT(Advanced Packaging Tool)是从更新源获取并安装软件包,而且会解决依赖关系, 但不会安 ...

  5. odoo 开发基础 -- 视图之xpath语法

    odoo 视图函数 在整个项目文件中,结构并不是十分明显,虽然它也遵循MVC设计,类比django的MTV模式,各个模块区分的十分明显,在Odoo中,视图的概念不是特别明显,很多时候,我们会将调用模型 ...

  6. kindEditor 使用

    1. kindEditor简介: KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果.     主要特点: 1. 体积小,加载速度快,但功能十分丰富.2 ...

  7. DockPanel与GeckoFX、ChrominumFX、CefSharp结合使用问题

    在使用DockPanel与ChrominumFx时,当在以下条件下拖动窗体时,会发生ChromiumWebBrowser崩溃的情况,此种情况也会在DockPanel与GeckoFX或CefSharp结 ...

  8. PHP:WampServer下如何安装多个版本的PHP、mysql、apache

    作为Web开发人员,在机器上安装不同版本的php,apache和mysql有时是很有必要的. 今天,我在调试一套PHP程序的时候,该程序中使用的某些函数在低版本中无法使用,所以只能在搞个高版本的php ...

  9. java8之lambda表达式(2)-方法引用

    方法引用使用的地方也是在函数式接口,使用方法引用可以使代码更加简单和便捷 在如下代码中 根据List中字符串长度排序的代码可以写成如下: public static void test1_() { L ...

  10. java多线程下的所的概念

    锁和synchronized关键字     为了同步多线程,Java语言使用监视器(monitors),一种高级的机制来限定某一 时刻只有一个线程执行一段受监视器保护的代码.监视器的行为是通过锁来实现 ...