vue加载图片失败解决方法

在vue项目中，我们引用图片组件 el-image 绑定路径会提示加载失败，如下图所示

<el-image class="zuipinImg"              src="@/assets/photo.png" :preview-src-list="zuopinsrcList">
</el-image>

解决方案

1、使用绝对路径

<el-image :src="'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'"></el-image>

2、使用require

<el-image :src="require('@/assets/photo.png')"> </el-image>

或者

<template><el-image :src="imgUrl">
</template>
<script>export default {data:function(){return {imgUrl: require("@/assets/photo.png")}}
}
</script>

3、使用import

<template><el-image :src="imgUrl"></el-image>
</template>
<script>
import jpg from '@/assets/photo.png'
export default {data:function(){return {imgUrl: jpg}}
}
</script>

vue加载图片失败解决方法相关推荐

vue加载图片失败处理
<img :src="item.info.headimgurl" alt="" @error="errorImg()"> dat ...
htmlimg图片加载失败_动态加载图片失败的默认图显示
经常碰到这类场景,动态加载图片时,因为一些原因(图片链接不存在啊,图片误删啊,图片路径不对或图片路径为空等等)导致真实图片显示不出来.那么为了提高用户体验,都会显示一个默认图. 动态加载图片失败时,显 ...
关于img标签加载图片失败优化以及懒加载。
这篇博客算是完全的笔记了,记录一下平常中不怎么注意的img标签的一些事. 昨天看到这篇Handling broken images with the service worker文章,这文章中有另外提 ...
chrome浏览器加载图片失败问题
现象:项目上线后,加载图片是正常的.过了一段时间,部分用户反馈加载图片失败,部分用户加载图片正常. 分析:系统是https的,图片链接为http的.Chrome在80版本后(所以部分用户能看到,部分看 ...
vue加载服务器json文件,Vue加载json文件的方法简单示例
本文实例讲述了Vue加载json文件的方法.分享给大家供大家参考,具体如下: 一.在build/dev-server.js文件里 var app = express() 这句代码后面添加如下(旧版): ...
百度编辑器Ueditor 初始化加载内容失败解决办法
原文地址为: 百度编辑器Ueditor 初始化加载内容失败解决办法项目上有用到百度文本编辑器ueditor,在页面加载的时候初始化编辑器内容时候,使用 $.document.ready(functi ...
qtCreator加载图片失败
qtCreator加载图片失败前言在qt中加载图片总是失败解决 1.首先工程pro文件中加入qrc文件配置项,比方说image.qrc 2.编辑image.qrc文件 <RCC>&l ...
Adobe Flash player 10 提示：Error#2044:未处理的IOErrorEvent. text=Error#2036:加载未完成的解决方法
Adobe Flash player 10 提示:Error#2044:未处理的IOErrorEvent. text=Error#2036:加载未完成的解决方法参考文章: (1)Adobe Fla ...
Eclipse无法编译，提示错误“找不到或者无法加载主类”解决方法
Eclipse无法编译,提示错误"找不到或者无法加载主类"解决方法参考文章: (1)Eclipse无法编译,提示错误"找不到或者无法加载主类"解决方法 (2) ...

vue加载图片失败解决方法

解决方案

vue加载图片失败解决方法相关推荐

最新文章

热门文章