100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > vue加载图片失败解决方法

vue加载图片失败解决方法

时间:2019-03-17 03:01:11

相关推荐

vue加载图片失败解决方法

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

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

解决方案

1、使用绝对路径

<el-image :src="'/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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。