vue-cli3 图片路径

引入图片的方式

图片路径用 ******* 代替

<template>
  <div>
    1.<img src="*******" alt="">
    2.<img :src="img" alt="">
    3. <div class="box imgurl"></div>
    4. <div class="box" style="background: url(*******);"></div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      img:`*******`
    }
  }
}
</script>

<style scoped>
.box{
  height: 200px;
  width: 200px;
  display: inline-block;
}
.imgurl{
 background: url(*******);
}
</style>

项目目录

├── public
│   ├── favicon.ico
│   ├── index.html
│   └── static
│       └──  logo.png   图片
├── src
│   ├── App.vue
│   ├── assets
│   │  └── logo.png     图片
│   └── views
│       ├── Home.vue
│       └── practice-center
│           └── test
│               └── index.vue   测试
└── yarn.lock

vue.config.js配置

module.exports = {
    publicPath: process.env.NODE_ENV === "production" ? '/my-vue-admin/' : "/"
};

public/static 绝对路径引用

1. 使用相对路径static/logo.png

  • 本地测试 , 部署测试 , 1、2、4 好使,3 不好使(会报错,测试须将其注释掉)。

2. 使用绝对路径/static/logo.png

  • 本地测试 ,均好使。
  • 部署测试
    • 根目录下,均好使;

    • 非根目录下,均不好使;

    • 非根目录下,须这样使用

      data () {
        return {
          publicPath: process.env.BASE_URL
        }
      }
      

      然后:

      <img :src="`${publicPath}my-image.png`">
      

何时使用 public 文件夹

你需要在构建输出中指定一个文件的名字。
你有上千个图片,需要动态引用它们的路径。
有些库可能和 webpack 不兼容,这时你除了将其用一个独立的

src/assets 相对路径引用

1. 相对路径 ../../../assets/logo.png

  • 本地测试,部署测试 1,3 好使

  • 2 、4修改成

    <template>
      <div>
        2.<img :src="img" alt="">
        4. <div class="box" :style="{background: 'url(' + img + ')' }"></div>
      </div>
    </template>
    
    <script>
    import imgurl from '../../../assets/logo.png'
    export default {
      data(){
        return {
          img:imgurl
        }
      }
    }
    </script>
    

    或者

    data(){
        return {
          img:require('../../../assets/logo.png')
        }
      }
    

2. 相对路径 @/assets/logo.png 或者~@/assets/logo.png

//vue.config.js
module.exports = {
    chainWebpack: config => {
        config.resolve.alias.set("@", resolve("src"));
    },
};
  • 1、3 只能使用~@/assets/logo.png
  • 2、4 只能使用@/assets/logo.png
<template>
  <div>
    1.<img src="~@/assets/logo.png" alt="">
    2.<img :src="img" alt="">
    3. <div class="box imgurl"></div>
    4. <div class="box" :style="{background: 'url(' + img + ')' }"></div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      img:require('@/assets/logo.png')
    }
  }
}
</script>

<style scoped>
.box{
  height: 200px;
  width: 200px;
  display: inline-block;
}
.imgurl{
 background: url('~@/assets/logo.png');
}
</style>

vue推荐使用功能assets

assetsstatic的区别

  • 相同点:
    assets和static两个都是存放静态资源文件。项目中所需要的资源文件图片,字体图标,
    样式文件等都可以放在这两个文件下,这是相同点

  • 不相同点:
    assets中存放的静态资源文件在项目打包时,也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传,所谓打包简单点可以理解为压缩体积,代码格式化。
    而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一同上传至服务器。
    static中放置的静态资源文件就不会要走打包压缩格式化等流程,而是直接进入打包好的目录,直接上传至服务器。
    因为避免了压缩直接进行上传,在打包时会提高一定的效率,但是static中的资源文件由于没有进行压缩等操作,
    所以文件的体积也就相对于assets中打包后的文件提交较大点。在服务器中就会占据更大的空间。

  • 建议:
    将项目中template需要的样式文件js文件等都可以放置在assets中,走打包这一流程。减少体积。
    而项目中引入的第三方的资源文件如iconfoont.css等文件可以放置在static中,
    因为这些引入的第三方文件已经经过处理,我们不再需要处理,直接上传。

  • 13
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值