vue页面图片不显示问题解决方案

在做新版组态界面的时候，用vue框架实现，在配置页面图片的时候发现有一张图片明明页面输入的路径是对的可是图片就是不显示出来

现象：

　　network页面资源也不报错,而且状态码竟然还是200，点preview里面又什么都没有，后面一输入，发现随便输入什么字都是出现的200

解决办法：

　　在webpack里面配置静态资源的路径

　　　1、找到vue.config.js

　　　2、在module.exports下面的devServer里面添加一个键

contentBase:path.join(_dirname,'src')

这句话的意思就是，webpack-dev-server 会使用当前的路径作为请求的资源路径

关于 contentBase，参考文章

https://www.jianshu.com/p/e547fb9747e0

静态资源：

方法一：直接输入路径

<img class="sys_logo" src="./assets/images/top-logo.png"/>

方法二：使用 require

import logoUrl  from './top-logo.png'
const Images = {
    logoUrl
}
export default Images

方法三：模块化

import logoUrl  from './top-logo.png'
const Images = {
    logoUrl
}
export default Images

使用：

js:

import Images from './assets/images'

html:

<img class="sys_logo" :src="Images.logoUrl" />

到此这篇关于vue页面图片不显示问题解决方案的文章就介绍到这了,更多相关vue页面图片不显示问题内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 解决vuejs项目里css引用背景图片不能显示的问题

    解决:build->utils.js里,修改:增加 publicPath:'../../', if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath:'../../', fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } 以上这篇解决vuejs项目里css引用背景图片

  • Vue批量图片显示时遇到的路径被解析问题

    最近在学Vue,感觉很难理解,学不懂. 昨天晚上开始第一个页面的搭建,脑子感觉通了一点,大概知道该怎么做了. 在放置轮播图时,要调用很多图片,图片路径在data的一个数组里,用v-for循环(因为还不会做轮播图,从网上找的代码) 图片路径是对的,但是不显示,就用普通img标签放了个图片看了一下,这样 网页上却变成了这样 于是我把每个图片都放了一次,把每个解析后的地址都粘贴在数组里,成了 但是这种方法也太蠢了,以后不能也这样办吧 就在网上查了一下,要加一个require,很多帖子里的图片路径都加了

  • 解决Vue打包后访问图片/图标不显示的问题

    大家可否遇到过 npm run build 打包后,项目在线上运行时,资源文件 (图片.图标)不显示 的问题, 接下来,我给大家分享一下我的解决方案~ 1.检查打包后dist中的css文件 打开此文件后你会头晕,因为都是打包压缩过的css代码,不过没关系 ,关键字搜索url 检查该url路径是否匹配正确 对比后惊人发现!!! 因此在url路径前添加../../就OK了, 但是 很麻烦,每次打包后都要进行二次加工吗? 并不是!!! 2.自动添加 ../../ 的方法 打开build/utils.j

  • vue中当图片地址无效的时候,显示默认图片的方法

    web项目中经常需要展示图片,很可能就会碰到图片地址无效的情况,比如图片地址不对,或者后台拿到图片地址后,该地址无效,或者数据库中没有该图片等情况.这时候,图片就会显示一个叉. 对于项目中出现的这种情况,我们也可以不做处理,但是比较影响美观,所以我们都会使用一个默认的图片来代替图片原来的地址. <img :src="item.img" @error="imgError(item)" /> 给图片添加一个error校验,当图片加载失效的时候,就会调用该属性

  • vue中使用axios post上传头像/图片并实时显示到页面的方法

    在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法. html代码: <div id="myPhoto" v-show="personalPhoto"> <div class="viewPhoto"> <img src="" alt="" id="portrait"style=&q

  • vue页面图片不显示问题解决方案

    vue页面图片不显示问题解决方案

    在做新版组态界面的时候,用vue框架实现,在配置页面图片的时候发现有一张图片明明页面输入的路径是对的可是图片就是不显示出来 现象: network页面资源也不报错,而且状态码竟然还是200,点preview里面又什么都没有,后面一输入,发现随便输入什么字都是出现的200 解决办法: 在webpack里面配置静态资源的路径 1.找到vue.config.js 2.在module.exports下面的devServer里面添加一个键 contentBase:path.join(_dirname,'s

  • Vue elementui字体图标显示问题解决方案

    问题如下 在build/utils.js下找到 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath: '../../' }) } else { return ['vue-style-loader'].concat(loaders) } 加上 publicPath: '../../' 运行项目还是不行 ,Failed to d

  • 在vue中v-for循环遍历图片不显示错误的解决方案

    在vue中v-for循环遍历图片不显示错误的解决方案

    目录 v-for循环遍历图片不显示错误 错误 vue本地图片路径正确,但for循环不显示 经过改正加个require()就可以显示了 v-for循环遍历图片不显示错误 <template> <div class="demo" :style="{width:innerWidth} + 'px' "> <div class="carousel-inner"> <div v-for="(img,i)

  • vue中img或元素背景图片无法显示或路径错误的解决

    vue中img或元素背景图片无法显示或路径错误的解决

    目录 img或元素背景图片无法显示或路径错误 背景图片打包后出现的路径引用错误问题 img或元素背景图片无法显示或路径错误 1.在给vue中img元素动态绑定图片路径时会显示不出来图片: <span>普通:</span><img src="./video.png" alt="" srcset=""> <span>动态绑定:</span><img :src="'./vide

  • Vue页面中引入img图片的方法

    我们在学习html的时候,图片标签<img>引入图片 <img src="../assets/images/avatar.png" width="100%"> 但是这样会有2个弊端: 因为采用绝对路径引入,所以如果后面这张图片移动了目录,就需要修改代src里的路径 如果这张图片在同一页面内有多个地方要使用到,就需要引入多次,而且图片移动了目录,这么多地方都要修改src路径 怎么办?使用动态路径import.require 首先讲讲这两个兄弟,

  • vue后台返回base64图片无法显示的解决

    目录 vue后台返回base64图片无法显示 解决方法如下 vue中base64转图片格式 vue后台返回base64图片无法显示 关于后台接口返回的图片base64格式页面无法显示的问题,我遇到的原因是因为返回的一串内容里面存在空格或者换行的原因 解决方法如下 let str = `data:image/jpg;base64,${res.imgStr}`         this.mpId = str.replace(/[\r\n]/g, '') let str = `data:image/j

  • vue页面切换到滚动页面显示顶部的实例

    在用mint ui写移动端从'listview'跳转到详情页时,详情页面由于大于手机高度可以滚动,当点击'listview'滚动list进入详情页面时发现详情页面不是从顶部开始显示. 一.目标: 'listview'进入详情页面时详情页面从页面顶部开始显示. 二.让首先查了下两个页面的scrollY,每次都是不一样的,也没有发现listview与详情页面之间的scrollY之间的规律 三.解决思路:进入详情页面的时候固定滚动页面的位置在顶部 四.代码实现:vue里面写法如下,至于updated生

  • 浅谈Vue页面级缓存解决方案feb-alive(上)

    feb-alive github地址 体验链接 使用理由 开发者无需因为动态路由或者普通路由的差异而将数据初始化逻辑写在不同的钩子里beforeRouteUpdate或者activated 开发者无需手动缓存页面状态,例如通过localStorage或者sessionStorage缓存当前页面的数据 feb-alive会帮你处理路由meta信息的存储与恢复 为什么开发feb-laive? 当我们通过Vue开发项目时候,是否会有以下场景需求? /a跳转到/b 后退到/a时候,希望从缓存中恢复页面

  • 浅谈Vue页面级缓存解决方案feb-alive (下)

    浅谈Vue页面级缓存解决方案feb-alive (下)

    feb-alive github地址 体验链接 Vue页面级缓存解决方案feb-alive (上) 在剖析feb-alive实现之前,希望大家对以下基本知识有一定的了解. keep-alive实现原理 history api vue渲染原理 vue虚拟dom原理 feb-alive与keep-alive差异性 1. 针对activated钩子差异性 keep-alive配合vue-router在动态路由切换的情况下不会触发activated钩子,因为切换的时候组件没有变化,所以只能通过befor

随机推荐