Vue 自定义标签的src属性不能使用相对路径的解决


Posted in Javascript onSeptember 17, 2019

场景

吾辈在使用 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 资源路径处理 有关系。

Vue 自定义标签的src属性不能使用相对路径的解决

官方明确指出会将所有资源路径作为模块依赖,也就是后台 vue-loader 帮我们转换成 require() 的形式了。

解决方案

vue cli 3

vue cli 3 的配置项 API 发生了改变,由 transformToRequire 改为 transformAssetUrls,而且配置方式也不再是直接修改 webpack 配置文件,而是修改 vue.config.js 这个经过包装后的文件。现在,最新的配置方式如下

module.exports = {
 chainWebpack: config => {
  config.module
   .rule('vue')
   .use('vue-loader')
   .loader('vue-loader')
   .tap(options => {
    return {
     ...options,
     //修复静态资源引用的问题 vue cli 2 => vue cli 3 升级之后配置项由 transformToRequire 改为 transformAssetUrls
     transformAssetUrls: {
      video: ['src', 'poster'],
      source: 'src',
      img: 'src',
      image: 'xlink:href',
      // 在这里添加需要使用静态资源的自定义元素
      'a-avatar': 'src',
     },
    }
   })
 },
}
具体参考
Vue Loader => 从 v14 迁移 => 废弃的选项
Vue Cli 3 => webpack 相关 => 链式操作 (高级) => 修改 Loader 选项

vue cli 2

那么,Veutify 组件中的 src 不能使用相对路径的原因就很明确了。因为 vue-loader 并不知道我们要把 v-imgsrc 属性转换成 require() 依赖。我们找到 vue-loader 配置处,在 options.transformToRequire 中加上 v-img 即可

// vuetify 框架的 src 标签也需要自动转换为 require
'v-img': 'src'

吾辈的配置文件在 build > vue-loader.conf.js

'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
 ? config.build.productionSourceMap
 : config.dev.cssSourceMap

module.exports = {
 loaders: utils.cssLoaders({
  sourceMap: sourceMapEnabled,
  extract: isProduction,
 }),
 cssSourceMap: sourceMapEnabled,
 cacheBusting: config.dev.cacheBusting,
 transformToRequire: {
  video: ['src', 'poster'],
  source: 'src',
  img: 'src',
  image: 'xlink:href',
  'v-img': 'src',
 },
}
vue-loader 官方文档参考

然后重启 npm run dev 刷新一下就行啦

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Yii-自定义删除确认弹框(zyd)jquery实现代码
Mar 04 Javascript
JS定时器实例详细分析
Oct 11 Javascript
基于javascript实现彩票随机数生成(简单版)
Apr 17 Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 Javascript
微信小程序 122100版本更新问题解决方案
Dec 22 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
了解VUE的render函数的使用
Jun 08 Javascript
浅谈ES6新增的数组方法和对象
Aug 08 Javascript
jQuery中过滤器的基本用法示例
Oct 11 jQuery
JS动画实现回调地狱promise的实例代码详解
Nov 08 Javascript
webpack4之如何编写loader的方法步骤
Jun 06 Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 06 Javascript
vue.js购物车添加商品组件的方法
Sep 17 #Javascript
关于vue项目中搜索节流的实现代码
Sep 17 #Javascript
Vue的生命周期操作示例
Sep 17 #Javascript
小程序两种滚动公告栏的实现方法
Sep 17 #Javascript
Vue Extends 扩展选项用法完整实例
Sep 17 #Javascript
react native 仿微信聊天室实例代码
Sep 17 #Javascript
Vue 自定义指令功能完整实例
Sep 17 #Javascript
You might like
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
一个js控制的导航菜单实例代码
2013/12/03 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
js脚本实现数据去重
2014/11/27 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
Python3 能振兴 Python的原因分析
2014/11/28 Python
Python版微信红包分配算法
2015/05/04 Python
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
利用Python实现原创工具的Logo与Help
2018/12/03 Python
Python中包的用法及安装
2020/02/11 Python
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
全球精选男装和家居用品:Article
2020/04/13 全球购物
门卫班长岗位职责
2013/12/15 职场文书
大型车展策划方案
2014/02/01 职场文书
商务日语专业毕业生自荐信
2014/03/27 职场文书
祖国在我心中的演讲稿
2014/05/04 职场文书
运动会演讲稿200字
2014/08/25 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
车间主任岗位职责
2015/02/03 职场文书
终止劳动合同通知书
2015/04/16 职场文书
党委工作总结2015
2015/04/27 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书