Vueで画像imgを表示する

序文

Vueを初めて使用するDaoの友達は、単純なものでも誰でも頭痛の種になると思います。したがって、Vueに画像をインポートする一般的な方法は2つあります。

インポート方法を使用

「テンプレート」のコード

<img :src="defaultImg" />

「スクリプト」内のコード：

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

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

requireメソッドを使用する

「テンプレート」のコード

<img :src="defaultImg" />

「スクリプト」内のコード：

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

サーバーから返された画像をエコーする

画像アドレスを動的にimgの
ソースにステッチ：$ hostはグローバル変数（main.jsで定義）

効果は次のとおりです。