Vue2和Vue3中解决本地图片在img标签动态赋值不显示问题

Vue2和Vue3中解决本地图片在img标签动态赋值不显示问题

问题：

对于在img标签中动态赋值导致图片无法显示，或项目build打包后路径错误，导致图片无法显示问题！

<template>
	<img :src="image" alt="图片"/>
</template>

vue2
<script>
export default {
  data() {
    return {
    	image:'../assets/logo.png'
    };
  }
};
</srcipt>

vue3
<script setup>
	const image = '../assets/logo.png'
</srcipt>

解决方法：

对于vue2：

<template>
	<img :src="image" alt="图片"/>
</template>

<script>
export default {
  data() {
    return {
    	image:require('../assets/logo.png') # 可使用webpack提供的require()
    };
  }
};
</srcipt>

对于vue3：

<template>
	<img :src="image" alt="图片"/>
</template>

<script setup>
	1、直接import引用该图片路径
	import image from '../../assets/Image/bg5.jpg'
	
	或
	
	2、new URL(本地路径, import.meta.url).href
	const image = new URL('../assets/logo.png', import.meta.url).href
</srcipt>

对于组件和组件之间img的src动态赋值也是适用，还有就是Vue3项目打包后，出现本地图片未显示，可查看打包目录dist下的assets文件夹是否包含该图片文件，未包含说明本地图片路径错误引用，未被识别处理！