前置条件
在使用 vue-img-proxy 之前，需要确保安装并配置好以下软件:
简介
vue-img-proxy 是一个可以帮助你在 Vue.js 中加载图片时自动添加代理前缀的 npm 包。它可以帮助你在使用第三方图片 CDN 时，有效避免因资源限制造成的加载不流畅、图片无法显示等问题。
安装
通过 npm 安装 vue-img-proxy：
npm install vue-img-proxy --save-dev
使用
在 Vue.js 中使用 vue-img-proxy，只需在项目的入口文件 main.js 中添加如下代码：
-- -------------------- ---- ------- ------ --- ---- ------ ------ ----------- ---- ---------------- -------------------- - --------- ------------------------------------ -- ------- --- --- ----- --- ------- ------- - -- ------ ---
其中，proxyUrl 为代理服务器的地址。可以根据实际情况进行相应配置。
通过以上步骤，即可在项目中自动添加代理前缀。在使用图片时，只需按照平常的方式引入即可，如：
<template> <img src="//cdn.example.com/image.png"> </template>
vue-img-proxy 会自动转换为以下形式：
<template> <img src="http://your.proxy.server/api/proxy//cdn.example.com/image.png"> </template>
示例代码
HTML：
<div id="app"> <img src="//cdn.example.com/image.png"> </div>
JavaScript：
-- -------------------- ---- ------- ------ --- ---- ------ ------ ----------- ---- ---------------- -------------------- - --------- ------------------------------------ --- --- ----- --- ------ ---
总结
通过 vue-img-proxy 这个 npm 包，我们可以实现图片代理的自动添加，有效避免因资源限制造成的加载不流畅、图片无法显示等问题。它的使用非常简单，只需要几行代码即可完成配置。在使用中，我们需要注意代理服务器的地址以及 CDN 地址的正确性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005600a81e8991b448ddd76