例如

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. Django(ORM常用字段)

    day68 参考:http://www.cnblogs.com/liwenzhou/p/8688919.html 1. Django ORM常用字段:             1. AutoField ...

  2. 小技巧——病毒分析中关闭ASLR

    原文来自:https://bbs.ichunqiu.com/thread-41359-1-1.html 病毒分析中关闭ASLR 分析病毒的时候,尽可能用自己比较熟悉的平台,这样可以大大地节省时间,像我 ...

  3. Shell - 简明Shell入门11 - 调用脚本(CallTheScript)

    示例脚本及注释 主脚本: CallTheScript.sh #!/bin/bash . ./11-subscript.sh # 调用其他脚本;注意点号"."和文件路径之间有一空格; ...

  4. Shell - 简明Shell入门02 - 变量(Variable)

    示例脚本及注释 #!/bin/bash v1=test-variable_123 # 全局变量 v2=12345 v3='This is a test!' # 赋值语句使用单引号或双引号可以包含空格 ...

  5. JAVA动态代理和方法拦截(使用CGLib实现AOP、方法拦截、委托)

    AOP用CGLib更简便.更可控. 动态代理的实现非常优雅. 实体类: public class SampleClass { public String MyFunction1(String inpu ...

  6. gensim与numpy array 互转

    目的 将gensim输出的格式转化为numpy array格式,支持作为scikit-learn,tensorflow的输入 实施 使用nltk库的停用词和网上收集的资料整合成一份新的停用词表,用来过 ...

  7. (转)csv — 逗号分隔值文件格式

    原文:https://pythoncaff.com/docs/pymotw/csv-comma-separated-value-files/125 csv 模块主要用于处理从电子数据表格或数据库中导入 ...

  8. ubuntu安装ruby的几种方法总结

    1.apt-get安装 可以使用apt-cache查询功能,找到对应的可用的ruby版本. $ sudo apt-cache search ruby #这个结果很长,我只截取最后与ruby有关的部分 ...

  9. Editplus php

    一.配置PHP帮助手册 1.打开Editplus,[工具]-->[配置用户工具],在[添加工具]子菜单下选择[HTML帮助(*.chm)(T)],文件路径选择php的chm帮助文件路径. 这样在 ...

  10. filebeat-1-连通logstash

    类似flume, 但功能更为强大 Filebeat是一个日志文件托运工具,在你的服务器上安装客户端后,filebeat会监控日志目录或者指定的日志文件,追踪读取这些文件(追踪文件的变化,不停的读),并 ...