import{_ as s,o as a,c as l,V as n}from"./chunks/framework.b31a4d00.js";const u=JSON.parse('{"title":"使用图片","description":"","frontmatter":{},"headers":[],"relativePath":"guide/image.md"}'),o={name:"guide/image.md"},p=n(`

使用图片 ​

使用图片 ​

假设在 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>
`,18),e=[p];function t(c,r,D,i,F,y){return a(),l("div",null,e)}const h=s(o,[["render",t]]);export{u as __pageData,h as default};