例如

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. 初探日志框架Logback

    一. 背景 最近因为学习项目时需要使用logback日志框架来打印日志, 使用过程中碰到很多的疑惑, 而且需要在控制台打印mybatis执行的sql语句, 于是决定沉下心来 研究一下logback的使 ...

  2. Spring Cloud断路器Hystrix

    在微服务架构中,存在着那么多的服务单元,若一个单元出现故障,就会因依赖关系形成故障蔓延,最终导致整个系统的瘫痪,这样的架构相较传统架构就更加的不稳定.为了解决这样的问题,因此产生了断路器模式. 什么是 ...

  3. Spring Boot日志管理

    SpringBoot内部使用Commons Logging来记录日志,但是默认也提供了对常用日志组件的支持,如:Log4j,Logback等.每种Logger都可以通过配置使用控制台或者文件输出日志内 ...

  4. Hadoop集群搭建中时间同步步骤

        一.设置主节点时间服务器的时区     二.在每一个节点上检查是否安装时间服务ntp     三.在主节点上配置时间同步的相关文件     四.在其他从节点上配置与主节点时间同步的脚本 一.设 ...

  5. Maven内置属性,pom属性

    内置属性(Maven预定义,用户可以直接使用) ${basedir}表示项目根目录,即包含pom.xml文件的目录; ${version}表示项目版本; ${project.basedir}同${ba ...

  6. iOS 8.0 bluetooth peripheral manager giving no callback for addService

    I am adding the service using: [self.peripheralManager addService:myService]; Is this method depreca ...

  7. CCF 201509-3 模版生成系统

    试题编号: 201509-3 试题名称: 模板生成系统 时间限制: 1.0s 内存限制: 256.0MB 问题描述 成成最近在搭建一个网站,其中一些页面的部分内容来自数据库中不同的数据记录,但是页面的 ...

  8. drools 的一个小demo

    直接上代码: 第一步,maven引入相关包 <?xml version="1.0" encoding="UTF-8"?> <project x ...

  9. FutureTask源码解析

    在Java中一般通过继承Thread类或者实现Runnable接口这两种方式来创建多线程,但是这两种方式都有个缺陷,就是不能在执行完成后获取执行的结果,因此Java 1.5之后提供了Callable和 ...

  10. gitlab之gitlab-ci和gitlab-runner<二>

    1.使用 该版未接入k8s,下一篇会写接入k8s. 配置项目使用gitlab-ci和gitlab-runner,在项目的根目录中添加.gitlab-ci.yml文件,用于触发pipeline. .ho ...