"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[972],{2296:(n,a,s)=>{s.r(a),s.d(a,{data:()=>e});const e={key:"v-528b8b6c",path:"/guide/image.html",title:"使用图片",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"使用图片",slug:"使用图片-1",children:[{level:3,title:"Vue 里使用图片",slug:"vue-里使用图片",children:[]},{level:3,title:"JS 里使用图片",slug:"js-里使用图片",children:[]},{level:3,title:"CSS 里使用图片",slug:"css-里使用图片",children:[]}]},{level:2,title:"public 文件夹",slug:"public-文件夹",children:[{level:3,title:"在HTML模板中使用",slug:"在html模板中使用",children:[]},{level:3,title:"在.vue 文件中使用",slug:"在-vue-文件中使用",children:[]}]}],filePathRelative:"guide/image.md",git:{updatedTime:165345025e4,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},2682:(n,a,s)=>{s.r(a),s.d(a,{default:()=>p});const e=(0,s(6252).uE)(' 使用图片
使用图片
假设在 src/images 目录下有 logo.png。
Vue 里使用图片
<template>\n <img src="@/images/logo.png`">\n</template>\n
1
2
3
JS 里使用图片
import imageUrl from '@/images/logo.png`'\n
1
CSS 里使用图片
.logo {\n background: url('@/images/logo.png')\n}\n
1
2
3
注意：
- 这是
webpack 的规则，如果切到其他打包工具，可能会有变化 less 中同样适用
public 文件夹
有些内容不需要经过 webpack 模块化处理，则可以将这些内容放在 public 文件夹，构建后会直接复制到 dist 目录，所以你需要通过BASE_URL来引入它们。
在HTML模板中使用
在 public/index.html 中需要设置：
<link rel="icon" href="<%= BASE_URL %>favicon.ico">\n
1
在.vue 文件中使用
<template>\n <img :src="`${publicPath}my-image.png`">\n</template>\n<script>\nexport default {\n setup() {\n return {\n publicPath: process.env.BASE_URL\n }\n }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12