如何解决Vue中自定义标签src属性不能使用相对路径的问题？

本文共计798个文字，预计阅读时间需要4分钟。

场景+使用Vuetify时遇到的，明确+img+标签即可使用相对路径获取到图片，而Vuetify的组件+v-img+则不能使用。+--+三种加载图片的方式+!--+正常加载 -- v-img :src=require('..')相对路径加载 -- v-img :src=require('@/assets/image.jpg')绝对路径加载 -- v-img :src=require('path/to/image.jpg')

场景

吾辈在使用 Vuetify 时突然遇到的，明明 img 标签就可以使用相对路径获取到图片，而 Veutify 的组件 v-img 却不能使用。

如下面 3 种加载图片的方式

<!-- 正常加载 --> <v-img :src="require('../../assets/logo.png')" /> <!-- 无法加载 --> <v-img src="../../assets/logo.png" /> <!-- 正常加载 --> <img src="../../assets/logo.png" />

吾辈在 segmentfault 上的提问

原因

是的，居然必须用 require() 引入图片才能生效，那为什么 img 标签可以直接使用相对路径呢？这和 vue-loader 资源路径处理 有关系。