vue加载图片时不能使用相对路径问题 - 简书

安宇雨 - 随手采集
2020-02-22 09:00:59
随手采集
0000-未整理-等待研究

Vue官方提供的图片控件el-image，在加载相对路径时会出现加载失败现象：

<el-image
      style="width: 22px; height: 28px"
      :src="'@/assets/images/icon/file/jpg.png'"
      fit="contain"
    >
</el-image>

查看network资源请求如下图：

image.png

感觉是没有正常解析el-image组件。

解决方案：

1、使用绝对路径

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

2、使用require

<el-image :src="require('@/assets/images/icon/file/jpg.png')"></el-image>

//////或者

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

3、使用import

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

Original url: Access
Created at: 2020-02-22 09:00:59
Category: default
Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到