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 相关文章推荐
彪哥1.1(智能表格)提供下载
Sep 07 Javascript
js文字滚动停顿效果代码
Jun 28 Javascript
基于jquery的无缝循环新闻列表插件
Mar 07 Javascript
JQuery对checkbox操作 (循环获取)
May 20 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
JQuery中extend的用法实例分析
Feb 08 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
js实现统计字符串中特定字符出现个数的方法
Aug 02 Javascript
完美实现js选项卡切换效果(二)
Mar 08 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
node.js使用redis储存session的方法
Sep 26 Javascript
手写实现JS中的new
Nov 07 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
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
PHP弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
PHP获取网页所有连接的方法(附demo源码下载)
2016/03/30 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
JQuery 动态扩展对象之另类视角
2010/05/25 Javascript
基于JQuery制作的产品广告效果
2010/12/08 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
玩转Koa之koa-router原理解析
2018/12/29 Javascript
浅谈JavaScript闭包
2019/04/09 Javascript
微信小程序如何使用globalData的方法
2019/06/06 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
在js文件中引入(调用)另一个js文件的三种方法
2020/09/11 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
使用Python写一个量化股票提醒系统
2018/08/22 Python
树莓派4B+opencv4+python 打开摄像头的实现方法
2019/10/18 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
没编程基础可以学python吗
2020/06/17 Python
Python return语句如何实现结果返回调用
2020/10/15 Python
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
魔幻般冒泡背景的CSS3按钮动画
2016/02/27 HTML / CSS
新闻专业毕业生英文求职信
2014/03/19 职场文书
物理学专业自荐信
2014/06/11 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
python字符串的多行输出的实例详解
2021/06/08 Python