vue 相对路径的图片 不显示问题

例如

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‘);
时间: 2024-08-24 12:44:31

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

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

项目开发中我们需要从网络获取图片显示到控件中,很多开源框架如Picasso可以实现图片下载和缓存功能.这里介绍的是一种简易的网络图片获取方式并把它显示到ListView中. 本案例实现的效果如下: 项目结构: 根据部分开源代码,我修改并封装了一个网络图片加载的工具类GetImageByUrl,通过调用其中的setImage方法,传入待显示图片的ImageView控件和该图片的url路径这两个参数即可实现获取网络图片的功能. GetImageByUrl.java package com.leo.i

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

数据库存取图片并在MVC3中显示在View中 根据路径读取图片: 1 byte[] img = System.IO.File.ReadAllBytes(@"d:\xxxx.jpg"); 简介:在有些情况下需要将图片转换为二进制流存放在数据库中,当显示时再从数据库中读出来显示在界面上. 本文简单介绍数据库中图片的存取方法,并在MVC3中显示在Razor视图中.仅供初学者参考学习. 1. 将图片转换为二进制流 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 1

Android -- 打开本地图片且显示路径

背景                                                                                          代码                                                                                           先上布局文件: <LinearLayout xmlns:android="http://schemas.android.co

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

dedecms5.7(织梦CMS5.7)二级域名文章图片不显示修改方法.相对路径改为绝对路径的方法 dedecms升级到5.7SP1后,开启二级域名,你会发现,在二级域名下的文章,上传的图片地址都是:二级域名+图片地址,这是相对路径.但是你的图片是默认上传在uploads里面的.应该使用绝对路径.这就出现图片路径错误,导致图片不显示.那怎么修改这种情况呢?我在网上看了好多方法,但是大部分最终是不可用的.在这里,将两种有效的方法分享给大家.这两种方法都是在你开启“多站点支持”.“绑定完二级域名”的

vue中img的src引入图片不显示问题

需要前端循环图片数组将其放到页面中去. 需要将src渲染到页面中,如果单纯写src的路径会出现不显示图片的问题 因为图片路径在assets,所以需要require一下. 原文地址:https://www.cnblogs.com/yuanxinru321/p/10572844.html

【Vue中的坑】vue项目中动态绑定src不显示图片解决方法

v-for绑定src的数据如下: data() { return { img_src:"../../assets/images/mirror-service.png" } } 渲染之后,发现图片不显示,上网查找之后发现是应为图片链接是需要通过 require包裹的 data() { return { img_src:require("../../assets/images/mirror-service.png)" } } 然后就会发现好使了 原文地址:https:/

vue 动态拼接地址,使用本地的图片不显示

<el-col :span="4" v-for="(item, index) in listData" :key="index"> <div class="grid-content grid-icon"> <router-link :to="item.url.replace('/', '-')"> <!--<img src="'../../asset

vue 公共方法 图片显示,如有图片正常显示,如没有显示默认图片

1.html <img :src="imgShow(imgUrl)" /> 2.js //图片显示,如有图片正常显示,如没有显示默认图片 data() imgUrl:'', mothods: imgShow:function(data){ let reg = /^(https:|http:)/g; if(data){ if(reg.test(data)){ return data; }else{ return 'http://192.168.0.176:8888/asset

div嵌套div 背景图片 不显示的问题

这几天 在做一个小Demo的时候碰到了如上的问题,一个DIV嵌套多个DIV时,父容器DIV不显示背景图片.同时结合之前碰到类似的问题,我归纳了如下几个解决方法: 1.就是常见的 子div 背景把父div的背景给盖住了,例子: 该例子就是 我有一个父div 和它里面嵌套的一个子div,两个div的宽度和高度大小是一样的,其中父div的背景图片就是上面这张图片(箭头部分是透明的),子div的背景图片是那种渐变灰色图片,其实懂英语的人应该看出来了就是,我想实现一个那种类似于iphone滑动那种灯光从