文章目录

• 引入图片的方式
• 项目目录
• public/static `绝对路径`引用
• • 1. 使用相对路径`static/logo.png`
  • 2. 使用绝对路径`/static/logo.png`
  • 何时使用 public 文件夹
• src/assets `相对路径`引用
• • 1. 相对路径 `../../../assets/logo.png`
  • 2. 相对路径 `@/assets/logo.png` 或者`~@/assets/logo.png`

引入图片的方式

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

<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

assets和static的区别

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

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

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！