vue框架中，图片应该保存在哪里？应该如何访问？

在使用vue框架进行开发的过程中，有两个文件夹都可以存放我们的图片以及样式等等，一个是public文件夹，一个是src下的assets文件夹；接下来博主会从这两个文件夹对图片的不同处理来进行分析：

public

如果将图片存入public文件夹，系统就会将原来的图片路径及名称编译为一个随机的名字，如下：

经过编译后的图片会极大的减小所占内存，所以在网页中直接展示的图片或者经常随数据库变换而变换的图片都应该放在public文件夹下，这样也可以加快网页的运行速度。

public下的图片用绝对路径来访问（比如下public下的img中有一张图片1.jpg）：

src="/img/1.jpg"

如果要访问动态的图片则用如下写法：

let pic = "1.jpg"        

<img :src="`/img/${pic}`">

src/assets

存入assets文件夹下的图片则不会被编译处理，而是原封不动的保存在服务器中；像网页中一些固定不变的图片如登录注册以及其他各种矢量图就应放于assets中。

存于assets中的图片用相对路径来访问：

src="@/assets/img/1.jpg"（@就相当于src）

src="../assets/img/1.jpg"

如果要访问动态的图片则用如下写法：

let pic = "1.jpg"

<img :src="require(`../assets/images/a/${pic}`)">

---

以下内容来自 AI 解释：

在 Vue 框架中，图片等静态资源的管理和访问是一个基础且重要的方面。通常，Vue 项目（特别是基于 Vue CLI 创建的项目）会将静态资源如图片、字体文件、视频等放置在特定的目录中，然后通过特定的路径来访问它们。以下是一些基本准则和步骤：

1. 图片应该保存在哪里？

在 Vue 项目中，你通常会将图片存放在 public 目录或 src/assets目录下。

• public目录：
  • 这个目录下的文件或目录会被直接复制到最终的输出（默认是dist/）目录，且不会被Webpack处理。因此，你可以通过绝对路径来引用它们。
  • 例如，如果你的图片存放在public/images/logo.png，那么你可以通过/images/logo.png这样的路径来访问它（注意开头的斜杠/，它表示根目录）。
• src/assets目录：
  • Vue CLI会将src/assets目录下的资源视为模块依赖来处理，因此你可以使用Webpack的模块解析机制来引入它们。
  • 这意味着你可以使用相对路径来引入资源，Vue CLI还会为这些资源生成哈希名（如果启用了哈希），以避免缓存问题。
  • 例如，如果你的图片存放在src/assets/images/logo.png，那么你可以在Vue组件中通过@/assets/images/logo.png（假设@是src目录的别名）来引入它。

2. 应该如何访问？

• 在Vue组件中访问：
  • 如果你是在Vue组件中访问图片，通常会使用require或import（针对.vue文件中的<template>部分，更常见的是使用require或静态路径）来引入图片。
  • 例如，在<template>中使用<img>标签时，可以直接使用src属性指向图片的路径（无论它是绝对路径还是相对路径）。
  • 在<script>部分，你可能会使用import或require来动态加载图片。
• 在CSS中访问：
  • 如果你需要在CSS中访问图片，同样可以使用相对路径或@别名（取决于你的CSS处理器和Webpack配置）。
  • 记住，当图片路径是在CSS文件中时，它通常是相对于CSS文件的位置，而不是Vue组件的位置。

结论

根据你的具体需求和项目结构，你可以选择将图片存放在public目录或src/assets目录下，并通过相应的路径来访问它们。通常，如果你想要Webpack处理你的图片（例如，进行压缩、生成哈希名等），那么将它们放在src/assets目录下会更合适。而如果你需要直接通过URL访问某些静态资源，或者不想让这些资源被Webpack处理，那么public目录可能是更好的选择。