mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-06 03:59:53 +08:00
62 lines
1.0 KiB
Markdown
62 lines
1.0 KiB
Markdown
# 使用图片
|
|
|
|
## 使用图片
|
|
|
|
假设在 `src/images` 目录下有 `logo.png`。
|
|
|
|
### Vue 里使用图片
|
|
|
|
```vue
|
|
<template>
|
|
<img src="@/images/logo.png`" />
|
|
</template>
|
|
```
|
|
|
|
### JS 里使用图片
|
|
|
|
```js
|
|
import imageUrl from '@/images/logo.png`';
|
|
```
|
|
|
|
### CSS 里使用图片
|
|
|
|
```css
|
|
.logo {
|
|
background: url('@/images/logo.png');
|
|
}
|
|
```
|
|
|
|
注意：
|
|
|
|
1. 这是 `webpack` 的规则，如果切到其他打包工具，可能会有变化
|
|
2. `less` 中同样适用
|
|
|
|
## `public` 文件夹
|
|
|
|
有些内容不需要经过 `webpack` 模块化处理，则可以将这些内容放在 `public` 文件夹，构建后会直接复制到 `dist` 目录，所以你需要通过`BASE_URL`来引入它们。
|
|
|
|
### 在 HTML 模板中使用
|
|
|
|
在 `index.html` 中需要设置：
|
|
|
|
```html
|
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
|
|
```
|
|
|
|
### 在.vue 文件中使用
|
|
|
|
```vue
|
|
<template>
|
|
<img :src="`${publicPath}my-image.png`" />
|
|
</template>
|
|
<script>
|
|
export default {
|
|
setup() {
|
|
return {
|
|
publicPath: process.env.BASE_URL,
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
```
|