Vue中顯示圖片img

前言

剛開始接觸Vue的道友們，相信哪怕一個簡單的也會讓大家頭疼不已。因此，此處記錄在Vue中引入圖片，常見的有兩種方式。

使用import方式

“template”中的代碼

<img :src="defaultImg" />

"script"中的代碼：

import deImg  from '@/assets/images/defaultImg.jpg'

export default {
		data () {
				return {
				 	defaultImg:deImg  
				  }
		 }
}

使用require方式

“template”中的代碼

<img :src="defaultImg" />

"script"中的代碼：

export default {
		data () {
				return {
				 	defaultImg:require('@/assets/images/defaultImg.jpg')
				  }
		 }
}

回顯服務器返回的圖片

在img的src中動態拼接圖片地址：
$host是全局變量(定義在main.js中)

效果如下：