Vue中显示图片img

153 阅读1分钟

在VUE中引入图片,有2种方式

  1. 使用import方式
  2. 使用require方式
  3. 回显服务器返回的图片

使用import方式

1.template 模版中的代码

<img :src="defaultImg" />

image.png

image.png

2.script 中的代码

import deImg  from '@/assets/075.gif'

image.png

3.return中定义引用

data() {
  return {
    
    defaultImg:deImg

  };
},

image.png

使用require方式

  1. 'template‘ 中的代码
<img :src="defaultImg" />
  1. return中定义
data() {
  return {
    defaultImg:require('@/assets/075.gif')

  };
},

image.png