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 相关文章推荐
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
Mar 24 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
Oct 16 Javascript
JS函数this的用法实例分析
Feb 05 Javascript
JavaScript中的Math.E属性使用详解
Jun 12 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
Aug 05 Javascript
老生常谈javascript变量的命名规范和注释
Sep 29 Javascript
vue实现app页面切换动画效果实例
May 23 Javascript
vue.js中$set与数组更新方法
Mar 08 Javascript
React props和state属性的具体使用方法
Apr 12 Javascript
vue实现移动端图片上传功能
Dec 23 Javascript
vue中element 的upload组件发送请求给后端操作
Sep 07 Javascript
JavaScript实现简易计算器小功能
Oct 22 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 curl模拟post请求小实例
2013/11/13 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
php批量删除操作代码分享
2017/02/26 PHP
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
require.js中的define函数详解
2017/07/10 Javascript
解决jQuery使用append添加的元素事件无效的问题
2018/08/30 jQuery
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
JavaScript canvas绘制渐变颜色的矩形
2020/02/18 Javascript
[35:26]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第三局
2016/02/26 DOTA
python中精确输出JSON浮点数的方法
2014/04/18 Python
python实现提取百度搜索结果的方法
2015/05/19 Python
Python实现周期性抓取网页内容的方法
2015/11/04 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
查看django版本的方法分享
2018/05/14 Python
python 使用pandas计算累积求和的方法
2019/02/08 Python
Pycharm及python安装详细教程(图解)
2020/07/31 Python
python3中确保枚举值代码分析
2020/12/02 Python
主管职责范文
2013/11/09 职场文书
产品质量承诺范本
2014/03/31 职场文书
学习优秀党务工作者先进事迹材料思想报告
2014/09/17 职场文书
说好普通话圆梦你我他演讲稿
2014/09/21 职场文书
群众路线个人整改方案
2014/10/25 职场文书
大学学生个人总结
2015/02/15 职场文书
稽核岗位职责范本
2015/04/13 职场文书
MySQL主从复制断开的常用修复方法
2021/04/07 MySQL