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文件夹是否包含该图片文件,未包含说明本地图片路径错误引用,未被识别处理!