vue图片放在public下怎么获取

在Vue组件中，如果将图片放在public目录下，可以通过相对路径来获取图片。例如，如果你的图片放在public/images目录下，可以在Vue组件中这样引用图片：

<template>
  <div>
    <img src="./images/example.jpg" alt="Example Image">
  </div>
</template>

这里的"./"表示当前组件所在的路径，因此可以通过相对路径来获取public目录下的图片。需要注意的是，public目录下的文件会直接被复制到打包后的根目录中，因此在部署后可以通过相对路径来访问这些文件。

相关问题

vue2 使用public下静态资源的方式

在 Vue2 中，可以使用 `public` 目录下的静态资源。这些资源可以通过相对路径来引用。

以下是在 Vue2 中使用 `public` 目录下的静态资源的步骤：

1. 将静态资源文件放在 `public` 目录下。例如，将图片文件放在 `public/img` 目录下。

2. 在 Vue 组件中使用相对路径引用静态资源文件。例如，如果要在组件中引用 `public/img/logo.png`，可以这样写：

   <template>
     <div>
       <img src="./img/logo.png" alt="logo">
     </div>
   </template>

这里的 `./` 表示相对路径，指的是组件所在的目录。

3. 在打包时，静态资源文件会被直接复制到输出目录中，因此可以直接通过相对路径引用它们。

注意事项：

- 如果静态资源文件的路径中包含空格或特殊字符，需要使用 URL 编码。
- 如果要在 `public` 目录下放置一些需要经过构建的文件（如 Less、Sass 或 TypeScript 文件），则需要在 `vue.config.js` 中配置相应的构建规则，以便打包时将它们编译成 CSS 或 JavaScript 文件。

vue项目的public文件用来干什么

在 Vue 项目中，public 文件夹是用来存放不需要经过 webpack 打包处理的静态资源文件。这些文件可以直接被浏览器访问到。比如，favicon.ico 文件、一些不需要经过打包的第三方 JS 或 CSS 文件、图片等资源文件都可以放在 public 文件夹中。

在 Vue 项目中，public 文件夹下的 index.html 文件是应用的入口文件，它会被打包后的 JS 文件引用，因此可以在 index.html 文件中添加一些全局的配置信息和依赖库的引用，比如添加 meta 标签、引入一些第三方 JS 库、CSS 库等等。