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.js应用中，`public`目录通常用于存放静态资源，如CSS、JavaScript、图片等，它们会被直接暴露在服务器上，无需经过Web服务器处理。如果你需要在Vue组件中引用这些静态文件，你可以按照以下步骤操作：

1. **放置文件**：将静态文件放在`src/public`目录下（在Vue CLI项目中默认如此）。例如，对于一个名为`styles.css`的样式表文件，应该放在`src/public/styles.css`。

2. **使用相对路径**：在Vue组件的模板中，通过`<link>`标签引用样式，或者使用`require`函数引入其他脚本文件，这时使用的是相对路径，如：
- 引入外部CSS：`<link rel="stylesheet" href="./styles.css">`
- 引入JavaScript：`<script src="./scripts.js"></script>`

3. **构建配置**：确保在`vue.config.js`或其他构建配置文件中，已经设置了正确的配置来让Webpack处理`public`目录下的内容。Vue CLI默认配置会自动处理这个部分，你不需要做额外设置。

4. **使用`import`动态导入**：如果你想在运行时动态加载这些文件，可以使用`import()`函数：

   import('./styles.css').then(style => {
     // 在这里注册样式到文档中
   });