# 使用图片

## 使用图片

假设在 `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>
```