Display image img in Vue

Preface

Dao friends who are new to Vue, I believe that even a simple one will cause everyone a headache. Therefore, there are two common ways to import pictures in Vue.

Use import method

Code in "template"

<img :src="defaultImg" />

Code in "script":

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

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

Use require method

Code in "template"

<img :src="defaultImg" />

Code in "script":

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

Echo the picture returned by the server

Dynamically stitch the image address in the src of img:
$host is a global variable (defined in main.js)

The effect is as follows: