zoukankan      html  css  js  c++  java
  • assets和static的异同

    相同点:

      1、都是用来放静态资源的

      2、如果资源在html中使用,都是可以的

        <img src="../../../assets/images/002.jpg">
        <img src="../../../../static/images/002.jpg">

      3、资源通过import引入,都可以在html中使用

    import assetsUrlImport from '../../../assets/images/002.jpg'
    import staticUrlImport from '../../../../static/images/002.jpg'
      data() { return { assetsUrlImport, staticUrlImport }
        <img :src="assetsUrlImport">
        <img :src="staticUrlImport">

    不同点:

      1、目录结构不同

        

      2、assets中的资源会被webpack处理,打包后会在dist中合并成一个文件;static中的资源不会被webpack处理,打包后直接复制到dist(默认是dist/static)下

      3、推荐assets中存放自己的资源(css、images、utils等),static中放第三方资源(pdf.js、iconfont等)

      4、动态绑定中,assets的图片会加载失败,因为webpack使用commonJS规范,需要使用require引入图片(可以通过import的方式引入)

          assetsUrl: '../../../assets/images/002.jpg', // 无法显示图片
          assetsUrlRequire: require('../../../assets/images/002.jpg'),
          staticUrl: '../../../../static/images/002.jpg'
        <img style="100px;" :src="assetsUrl">
        <img style="100px;" :src="assetsUrlRequire">
        <img style="100px;" :src="staticUrl">

        

  • 相关阅读:
    Bootstrap<基础十四> 按钮下拉菜单
    Bootstrap<基础十三> 按钮组
    Bootstrap <基础十二>下拉菜单(Dropdowns)
    Bootstrap<基础十一>字体图标(Glyphicons)
    Bootstrap<基础十> 响应式实用工具
    Bootstrap<基础九>辅助类
    Bootstrap <基础八>图片
    Bootstrap <基础七>按钮
    Bootstrap<基础六> 表单
    Bootstrap <基础五>表格
  • 原文地址:https://www.cnblogs.com/wuqilang/p/15181965.html
Copyright © 2011-2022 走看看