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>
  • 相关阅读:
    1 slow requests are blocked > 32 sec解决方法
    centos7下搭建ceph luminous(12.2.1)--无网或网络较差
    防止集群数据恢复设置
    ceph:health_warn clock skew detected on mon的解决办法
    Windows下判断jdk是否安装好以及环境变量是否配置好
    卸载Myeclipse10.5 报错“an error has occured.See the log file ...Uninstaller...”
    转: Laravel 自定义公共函数的引入
    windows下安装composer
    PHP与.Net的区别(一)接口
    phpStorm+XDebug配置
  • 原文地址:https://www.cnblogs.com/onesea/p/15431759.html
Copyright © 2011-2022 走看看