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 相关文章推荐
取得传值的函数
Oct 27 Javascript
jquery插件推荐 jquery.cookie
Nov 09 Javascript
JS实现单行文字不间断向上滚动的方法
Jan 29 Javascript
js+div实现文字滚动和图片切换效果代码
Aug 27 Javascript
JS鼠标拖拽实例分析
Nov 23 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
利用VS Code开发你的第一个AngularJS 2应用程序
Dec 15 Javascript
vue实现2048小游戏功能思路详解
May 09 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 Javascript
node 解析图片二维码的内容代码实例
Sep 11 Javascript
js实现烟花特效
Mar 02 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 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实现图片裁剪、添加水印效果代码
2014/10/01 PHP
Zend Framework数据库操作技巧总结
2017/02/18 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
2013/01/08 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
javascript时间函数大全
2014/06/30 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
JavaScript自定义文本框光标
2017/03/05 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
python监控键盘输入实例代码
2018/02/09 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
《自然之道》教学反思
2014/02/11 职场文书
临床专业自荐信
2014/06/22 职场文书
迎国庆演讲稿
2014/09/15 职场文书
工程部岗位职责
2015/02/10 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
学术研讨会主持词
2015/07/04 职场文书