Vue 自定义标签的src属性不能使用相对路径的解决

场景

吾辈在使用 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-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-img 的 src 属性转换成 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 刷新一下就行啦

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决Vue.js 2.0 有时双向绑定img src属性失败的问题

    错误用法: <img src="http:0.0.0.127/{{item.imgname}}" alt=""> 正确用法: <img src="'http:0.0.0.127/'+item.imgname" alt=""> 绑定属性的时候,前面加: 属性的值可以用表达式,但注意字符串拼接的时候要加引号 以上这篇解决Vue.js 2.0 有时双向绑定img src属性失败的问题就是小编分享给大家的全部内

  • Vue用v-for给src属性赋值的方法

    我的代码结构如下面代码所示,无法执行,在img中的src属性中无法用mustache表示法 <div id="test"> <div v-for="item in lists"> <img src="{{item.img}}"> </div> </div> new Vue({ el: "#test", data: function () { return { list

  • 解决vue2.0动态绑定图片src属性值初始化时报错的问题

    在vue2.0中,经常会使用类似这样的语法 v-bind:src = " imgUrl "(缩写 :src = " imgUrl "),看一个案例 <template> <div> <img :src="imgUrl"> </div> </template> <script> export default { data(){ return { captcha_id: &quo

  • Vue中img的src属性绑定与static文件夹实例

    Vue中img的src属性绑定与static文件夹实例

    不少人在vue的开发中遇到这样一个问题: img的src属性绑定url变量,然而图片加载失败. 大部分的情况中,是开发者使用了错误的写法,例如: <img src="{{ imgUrl }}"/> 这样写肯定是不对的,正确的写法应该使用v-bind: <img v-bind:src="imgUrl"/> 不过,有时候即使使用了正确的语法,依旧无法显示图片,因为你的imgUrl使用了本地图片的路径. 例如,有下面一个文件结构: 现在,我们要在A

  • Vue 自定义标签的src属性不能使用相对路径的解决

    场景 吾辈在使用 Vuetify 时突然遇到的,明明 img 标签就可以使用相对路径获取到图片,而 Veutify 的组件 v-img 却不能使用. 如下面 3 种加载图片的方式 <!-- 正常加载 --> <v-img :src="require('../../assets/logo.png')" /> <!-- 无法加载 --> <v-img src="../../assets/logo.png" /> <!

  • JavaWeb开发之JSTL标签库的使用、 自定义EL函数、自定义标签（带属性的、带标签体的）

    JavaWeb开发之JSTL标签库的使用、 自定义EL函数、自定义标签（带属性的、带标签体的）

    JSTL  JSTL简介: JSTL的全称:JSP Standard Tag Library,JSP标准标签库 JSTL的作用: 提供给Java Web开发人员一个标准通用的标签函数库 和EL来取代传统直接在页面上嵌入Java程序(Scripting)的做法,以提高程序可读性.维护性和方便性 JSTL的版本: JSTL的主要版本是1.0.1.1和1.2(区别不大) 1.0版本EL表达式还没有纳入官方规范 1.1和1.2版本EL表达式已经纳入了官方规范 JSTL1.1 下载相应的jar包 JSTL

  • vue自定义标签和单页面多路由的实现代码

    1. 自定义组件标签(如在主页插入顶栏/侧边栏等)   比如说要将Header.vue插入Home.vue中显示:定义好Header.vue,然后在Home.vue的script中导入Header.vue: import vHead from "./Header.vue"; #导入Header.vue为vHead,注意路径, Header.vue和Home.vue 在同一路径下用./ 然后导出组件: export default { components: { vHead, } };

  • Jquery修改image的src属性,图片不加载问题的解决方法

    1. 当点击某一按钮的时候,把图片域中的图片改变一下 <img id="randimg" src="/servlet/CreateValidateNum" width="60" height="20" /> <span style="cursor:hand" onclick="reflush();return false;">看不清</span> &l

  • vue中渲染对象中属性时显示未定义的解决

    后端给的对象结构是这样的,三层嵌套 而在最开始的时候我在data中定义了一个对象(dataInfo)接受了图示所有的属性 而在template中我要渲染数据(dataInfo.clientInfo.deviceName) 然后....在这里插入图片描述 未定义...作为一个前端菜鸡,百思不得其解. 最终在有道的帮助下,告诉我了此属性不在vue实例上 恍然大悟 只能解析在data中定义也就是vue实例上的对象子一层的东西,对于孙一层的东西就被解析成不在vue实例上的 两种解决方法: 第一: 在定义

  • js改变img标签的src属性在IE下没反应的解决方法

    今天写项目时遇到个图片需要动态改变,例: <img src="images/image01.jpg" id="myImage" /> 然后改变时,使用js脚本: document.getElementById('checkCodeImage').src='images/image02.jpg'; 然后在Chrome FF里都能改变成功,但在IE下却不行,网上搜了半天,大概了解了,这个是IE的一个bug,要想改变src属性成功,可以这么写: documen

  • js实现的修改div里img标签的src属性

    无标题文档 function addmethod() { var table=document.getElementById("table"); var tr=table.firstChild.getElementsByTagName("tr")[0]; var arr=tr.getElementsByTagName("td"); for (var i=0;i [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JSP自定义标签-标签属性_动力节点Java学院整理

    JSP自定义标签-标签属性_动力节点Java学院整理

    对自定义标签添加一些属性,可以使我们的标签功能更加灵活和复用.例如前一篇博客使用简单标签来对标签体内容执行一定的次数,就无法在标签上规定要执行的次数,必须在标签处理器类中修改,很不方便,如果使用带属性的标签就能很好的解决这个问题. 要想使简单标签具有属性,通常需要满足以下两个步骤: ① 在标签处理器类中定义属性,同时为每个属性生成setter方法: ② 在TLD文件中对于的<tag>标签下添加属性的<attribute>标签,同时<attribute>标签下定义其从标签

随机推荐