vueでimgタグで画像が表示されない問題を解決

vue では img タグが表示されないという問題によく遭遇しますが、私が遭遇したのは 2 種類あり、どちらも webpack のパッケージ化が原因でパスが見つからないため現実的ではありません。
ローカル画像のパスが表示できない問題を解決できます。
1. 画像を src と同じレベルの静的フォルダーに置きます。
2. 画像を cdn に配置し、ネットワーク アドレスを imgUrl に保存して、直接表示します。
3. 画像をアセットフォルダーに置き、データ内の画像を要求します

コードの記述方法は次のとおりです

シナリオ 1: テンプレート内で、

<img :src='imgSrc'>,

<script>

export default {
    
    

	data(){
    
    
	
		imgSrc: require('本地图片路径')
	
	}

}

</script>

require はローカル イメージをインポートする方法であり、webpack パッケージ化でも正しいイメージ パスを見つけることができます。

ケース 2: テンプレート内

<div v-html='imgSrc'></div>

<script>

export default {
    
    

	data(){
    
    
	
		imgSrc: '<img src="图片放在public或者static下的路径">'
	
	}

}

</script>

webpackをパッケージ化するとピクチャのパスが変わってしまい、通常のsrc以下のピクチャが表示できなくなるため、ピクチャをpublicまたはstaticに置くことでプロジェクト実行中に表示できるようになります。開発環境の場合、通常はパブリック フォルダーに配置されます。