vue3通过new URl的方式动态获取图片 报错 Not allowed to load local resource

在 Vue.js 中，如果你尝试通过 `new URL()` 动态获取本地资源（如图片），例如文件路径，可能会遇到 "Not allowed to load local resource" 的错误。这是因为浏览器的安全策略限制了对本地文件的直接访问，防止恶意脚本读取用户计算机的文件系统。

当你需要在前端展示本地图片，应该按照以下步骤操作：

1. **使用相对路径**：如果图片位于同级目录或者静态资源目录下，可以直接使用相对路径，如 `<img src='./image.jpg'>`。

2. **使用file协议**：可以使用 `file:` 协议访问，但这仅限于开发环境，线上部署会失效。示例：

   <img :src="process.env.NODE_ENV === 'development' ? 'file://' + imgUrl : imgUrl">

然后在构建时，需要配置相应的处理规则，移除 `file://` 前缀。

3. **使用File API**：在现代浏览器中，你可以通过 `fetch` 或者 `XMLHttpRequest` 加载本地文件，并设置响应类型为 `blob` 或 `arraybuffer` 后再转换为 URL。这通常用于富文本编辑器等场景，而不是常规的图片加载。

4. **使用服务器转发**：在生产环境中，为了安全考虑，应该将图片上传到服务器，然后动态提供正确的 URL 访问。

记得在实际项目中，最好遵循内容分发网络（CDN）的原则，将静态资源放在云端供所有用户访问，避免因为服务器配置问题导致的问题。