以 vue 为例

• 我们在项目中，单个 image 的 静态src 是可以的

<img src="../../assets/logo.png" alt="图片" />

• 但是当我们需要动态渲染的时候

<img :src="item.img" alt="图片" />
...
imgList: [
		{ img: '../../assets/logo.png' },
		{ img: '../../assets/2.png' }
]

 ⚠  想改为动态赋值的形式就实现不了

 ♥  所以改为如下，就可以了

<img :src="item.img" alt="图片" />
...
imgList: [
     {  img: require('../../assets/logo.png')  }, 	
     {  img: require('../../assets/2.png')  }
]

 💤 总结

webpack中会将图片来当作模块来用，因为是动态加载的，所以url-loader将无法解析图片地址，将图片作为模块加载进去，用require()就可以了