zoukankan      html  css  js  c++  java
  • 如果优雅地在Vue页面中引入img图片

     

    我们在学习html的时候,图片标签<img>引入图片

    <img src="../assets/images/avatar.png" width="100%">
    复制代码

    但是这样会有2个弊端:

    • 因为采用绝对路径引入,所以如果后面这张图片移动了目录,就需要修改代src里的路径
    • 如果这张图片在同一页面内有多个地方要使用到,就需要引入多次,而且图片移动了目录,这么多地方都要修改src路径

    怎么办?使用动态路径import、require

    首先讲讲这两个兄弟,在ES6之前,JS一直没有自己的模块语法,为了解决这种尴尬就有了require.js,在ES6发布之后JS又引入了import的概念

    • 使用import引入

    import之后需要在data中注册一下,否则显示不了

    <script>
    import lf1 from '@/assets/images/cityOfVitality/lf1.png'
    import lf2 from '@/assets/images/cityOfVitality/lf2.png'
    import lf3 from '@/assets/images/cityOfVitality/lf3.png'
    import lf4 from '@/assets/images/cityOfVitality/lf4.png'
    import lf5 from '@/assets/images/cityOfVitality/lf5.png'
    import lf6 from '@/assets/images/cityOfVitality/lf6.png'
    import lf7 from '@/assets/images/cityOfVitality/lf7.png'
    import top1 from '@/assets/images/cityOfVitality/icon_top1.png'
    import mixins from './mixins'
    export default {
      name: 'LeftPiece',
      mixins: [mixins],
      data () {
        return {
          lf1,
          lf2,
          lf3,
          lf4,
          lf5,
          lf6,
          lf7,
          top1
        }
      }
    }
    </script>
    复制代码
    • 使用require引入
    <script>
    import top1 from '@/assets/images/cityOfVitality/icon_top1.png'
    import mixins from './mixins'
    export default {
      name: 'RightPiecr',
      mixins: [mixins],
      data () {
        return {
          rt1: require('@/assets/images/cityOfVitality/rt1.png'),
          rt2: require('@/assets/images/cityOfVitality/rt2.png'),
          rt3: require('@/assets/images/cityOfVitality/rt3.png'),
          rt4: require('@/assets/images/cityOfVitality/rt4.png'),
          rt5: require('@/assets/images/cityOfVitality/rt5.png'),
          rt6: require('@/assets/images/cityOfVitality/rt6.png'),
          top1
        }
      }
    }
    </script>
  • 相关阅读:
    基于 cobbler 实现自动安装 linux 系统
    自动安装 linux 系统
    从12306网站新验证码看Web验证码设计与破解
    用java实现删除文件夹里的所有文件
    本机访问其它电脑上的oracle数据库
    powerdesigner 15 如何导出sql schema
    使用PowerDesigner建立数据库模型
    com.google.gson.stream.MalformedJsonException的解决办法
    Spring注解详解
    nginx中文手册内容说明
  • 原文地址:https://www.cnblogs.com/onesea/p/15431759.html
Copyright © 2011-2022 走看看