文章目录
引入图片的方式
图片路径用 ******* 代替
<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中,
因为这些引入的第三方文件已经经过处理,我们不再需要处理,直接上传。