相信很多小伙伴都遇到过图片路径问题，一种是样式中的背景图，一种是img标签。
动态切换img的src时，图片路径失败，主要是因为vue没有把我们写的路径字符串当做路径处理，而是纯字符串处理了。
如下3种写法，1是正常的静态路径；2是常出错的动态路径写法；3是正确动态路径写法。
<template>
<div class="container">
<img src="@/assets/logo.png" />
<img :src="pic" />
<img :src="pic1" />
</div>
</template>
<script>
import pic1 from '@/assets/logo.png'
export default {
name: 'test',
data() {
return {
pic: '@/assets/logo.png',
pic1: pic1,
}
},
methods: {},
}
</script>
查看3中写法在浏览器中的渲染结果，如下图
由此可见，第2种动态路径，没有按路径解析，直接做字符串渲染了。
使用import导入的图片会按照路径解析出正确路径，当然有同学使用require引入图片的方式，也是可以的。
网友评论