Vue自定义标签的src属性无法通过相对路径解决

事件

我们在使用Vuetify的时候，突然遇到img标签可以使用相对路径获取图片，但是不能使用Veutify的组件v-img。

比如以下三种加载图片的方式

！-正常加载-v-img 3360 src=' http 3360 require('././assets/logo.png')'/！-无法加载-v-img src=' http:/./assets/logo.png'/！-正常加载-img src=' http:/./assets/logo . png '/为什么我们会问关于segmentfault的问题

是的，需要使用require()导入图片才能生效，那么为什么img标签可以直接使用相对路径呢？这与vue-loader资源路径处理有关。

官方明确指出，所有的资源路径都会被视为模块依赖，也就是后台vue-loader会帮助我们将其转换为require()的形式。

解决办法

vue cli 3

vue cli 3中配置项的API已经从transformToRequire改为transformAssetUrls，配置方式不再是直接修改webpack配置文件，而是修改打包文件vue.config.js现在最新的配置如下

module . exports={ chainwebpack k : config={ config . module。规则(' vue ')。使用(' vue-loader ')。装载机(“vue-loader”)。点击(选项={ return {.options，//修复静态资源引用vue cli 2=vue cli 3的问题升级后，配置项从transformToRequire变为transformasserturls : { video :[' src '，'海报']。Source3360' src '，img:' src '，image:' xlink3360 href '，//在这里，添加自定义元素' a-avatar' :' src '，}，})。}参考vuelioader=从v14迁移=过时选项Vue Cli 3=webpack相关=链操作(高级)=修改Loader选项vue cli 2

那么，Veutify组件中的src不能使用相对路径的原因就清楚了。因为vue-loader不知道我们需要把v-img的src属性转换成require()依赖关系。我们找到vue-loader配置，并将v-img添加到选项中。变压器设备

vuetify框架的src标签也需要自动转换为require'v-img': 'src '。我们的配置文件位于build vue-loader.conf.js中

使用严格的“const utils=require”。/utils')const config=require('./config)const is production=process . ENV . node _ ENV==' production ' const source mapenabled=is production？config . build . productionsourcemap : config . dev . cssssourcemapmodule . exports={ loaders : utils . CSS loaders({ sourcemap : sourceMapEnabled，extract: isProduction，})，cssourcemap : sourceMapEnabled，cachebust : config . dev . cachebreaking，Transform设备3: { video 3:[' src '，'海报']，source: ' src '，img 3:

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。