在 vue 中书写图片路径有两种主要方法：相对于静态资源目录，使用相对路径，例如：。相对于 public 目录，使用绝对路径，例如：。

Vue 中图片路径如何书写

在 Vue 中书写图片路径有两种主要方法：

1. 相对于静态资源目录

<img  src="./image.png" alt="vue图片路径应该怎么写" >

这是使用相对路径的方法。./ 表示当前目录，因此 image.png 文件必须位于与组件相同的目录中。

2. 相对于 public 目录

<img  src="/image.png" alt="vue图片路径应该怎么写" >

这使用的是绝对路径。public 目录是 Vue CLI 默认创建的用于存储静态资源的文件目录。所有放置在该目录中的文件都可以在应用程序中通过绝对路径访问。

其他注意事项：

• 可以使用 require 函数动态导入图片：require('@/assets/image.png')
• 可以使用 v-bind 指令动态绑定路径：
• 在生产模式下，图片路径会经过优化，以减小文件大小和提高性能。