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 相关文章推荐
让Firefox支持event对象实现代码
Nov 07 Javascript
异步javascript的原理和实现技巧介绍
Nov 08 Javascript
jquery中的$(document).ready()使用小结
Feb 14 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
jQuery内容过滤选择器用法示例
Sep 09 Javascript
简单实现jQuery手风琴效果
Aug 18 jQuery
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
Vue项目使用CDN优化首屏加载问题
Apr 01 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
Jun 19 Javascript
vue实现多个元素或多个组件之间动画效果
Sep 25 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 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守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
预加载css或javascript的js代码
2010/04/23 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
2016/10/19 Javascript
javascript DOM的详解及实例代码
2017/03/06 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
Vue Prop属性功能与用法实例详解
2019/02/23 Javascript
浅析JavaScript异步代码优化
2019/03/18 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
vue 集成 vis-network 实现网络拓扑图的方法
2019/08/07 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
Pandas中把dataframe转成array的方法
2018/04/13 Python
python获取代理IP的实例分享
2018/05/07 Python
浅析PHP与Python进行数据交互
2018/05/15 Python
python之Flask实现简单登录功能的示例代码
2018/12/24 Python
python实现的config文件读写功能示例
2019/09/24 Python
基于Python把网站域名解析成ip地址
2020/05/25 Python
python unichr函数知识点总结
2020/12/16 Python
Jo Malone美国官网:祖玛珑香水
2017/03/27 全球购物
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
业务员岗位职责范本
2013/12/15 职场文书
老公保证书
2015/01/17 职场文书
JavaScript的function函数详细介绍
2021/11/20 Javascript
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL