Vue：使用v-for渲染＜img＞中v-bind:src绑定的几种方式实践

一、最保熟的方式：图片放public

1、文件目录结构，图像放在public下的images里面

2、js中定义一个v-for数组

const imgs = [                //js代码，数组内包含public文件内图片代码，用来v-for
{src:"images/image1.png"},       //绝对路径
{src:"./images/image2.png"},       
];    

3、html里开始v-for

<img v-for="im of imgs" :src="im.src">        

此方法保熟的点在于部署到服务器，也是正常显示的，即使没有部署到服务器的根目录。

二、其他不保熟的方法，及出问题的点：

1、im.src处不写相对路径，而是写绝对路径

分析：
（1）、如果在imgs数组中的src处 直接 填写路径，那么:src="im.src"此处的src接收到的是个 字符串 ，而不是路径，所以无法解析相对路径；
问题：
（1）、如果是部署在根（即服务器绝对路径与本地的绝对路径一致），使用绝对路径可以正常显示，但是如果服务器的根与本地的根目录不一致，那么将无法正常显示。

2、使用require() 方法（需要webpack）

分析：
没试过…使用webpack的同学自己去试试吧

3、new URL(imagePath, import.meta.url).href（需要vite）

静态资源处理：new URL(url, import.meta.url)
分析：
在生产构建时，Vite 只会转换静态url字符串，所以当url为变量时，是不给转换的；

// Vite 不会转换这个
const imgUrl = new URL(imagePath, import.meta.url).href   //js代码

问题：
部署到服务器后，不一定能正确显示（当根目录不一致时）

三、public目录

如果你有下列这些资源：

• 不会被源码引用（例如 robots.txt）
• 必须保持原有文件名（没有经过 hash）
• 或者你压根不想引入该资源，只是想得到其URL。

那么你可以将该资源放在指定的 public 目录中，它应位于你的项目根目录。该目录中的资源在开发时能直接通过 / 根路径访问到，并且打包时会被完整复制到目标目录的根目录下。
请注意：

• 引入 public 中的资源永远应该使用根绝对路径 。
• public 中的资源不应该被 JavaScript 文件引用。