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 相关文章推荐
js封装的textarea操作方法集合(兼容很好)
Nov 16 Javascript
在jQuery中 常用的选择器介绍
Apr 16 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
node.js中的fs.fstat方法使用说明
Dec 15 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
Mar 05 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 Javascript
小程序Scroll-view上拉滚动刷新数据
Jun 21 Javascript
JS如何定义用字符串拼接的变量
Jul 11 Javascript
原生JS实现音乐播放器的示例代码
Feb 25 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
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
《PHP编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
Drupal7中常用的数据库操作实例
2014/03/02 PHP
php实现按天数、星期、月份查询的搜索框
2016/05/02 PHP
PHP模糊查询技术实例分析【附源码下载】
2019/03/07 PHP
javascript 判断数组是否已包含了某个元素的函数
2010/05/30 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
2013/03/18 Javascript
jquery $.fn $.fx是什么意思有什么用
2013/11/04 Javascript
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
2018/09/03 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
vue页面更新patch的实现示例
2020/03/25 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
2020/07/17 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
微信小程序实现购物车小功能
2020/12/30 Javascript
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
python dict.get()和dict['key']的区别详解
2016/06/30 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
python使用Matplotlib画饼图
2018/09/25 Python
python实现在遍历列表时,直接对dict元素增加字段的方法
2019/01/15 Python
使用python实现哈希表、字典、集合操作
2019/12/22 Python
Python如何测试stdout输出
2020/08/10 Python
关于探究python中sys.argv时遇到的问题详解
2021/02/23 Python
HTML5表格_动力节点Java学院整理
2017/07/11 HTML / CSS
2015年上半年党建工作总结
2015/03/30 职场文书
法人代表证明书范本
2015/06/18 职场文书
react中的DOM操作实现
2021/06/30 Javascript