Vue动态加载图片在跨域时无法显示的问题及解决方法

Vue动态加载图片在跨域时无法显示的问题是由于浏览器的同源策略导致的。下面我将提供两种解决方法：

方法一：使用代理

1. 安装http-proxy-middleware中间件

npm install http-proxy-middleware --save-dev

1. 在vue.config.js中配置代理

const proxyUrl = "http://example.com"; // 代理地址
module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: proxyUrl,
        changeOrigin: true,
        pathRewrite: {
          "^/api": "",
        },
      },
    },
  },
};

1. 在组件中使用代理访问图片

<template>
  <div>
    <img :src="`${proxyUrl}/image.jpg`">
  </div>
</template>

<script>
export default {
  data() {
    return {
      proxyUrl: "/api",
    };
  },
};
</script>

使用代理的好处是可以隐藏真实的后台地址，不对外暴露。但是代理存在中间层，会对性能造成一定影响。

方法二：服务器配置CORS，设置响应头

1. 服务器端设置CORS（也可以设置响应头）

// 使用 Express 作为服务器示例
app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*"); // 允许的跨域地址，*表示允许所有地址
  res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE"); // 允许的跨域方法
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  ); // 允许的请求头
  next();
});

1. 在组件中引用图片

<template>
  <div>
    <img :src="'http://example.com/image.jpg'" crossorigin="anonymous">
  </div>
</template>

注意：这里的crossorigin属性一定要设置为anonymous，否则将无法解决跨域问题。

使用这种方法，相对来说比较简单，但需要对服务器进行修改，才能实现跨域请求。

以上就是解决Vue动态加载图片在跨域时无法显示的问题的两个方法，希望可以帮到大家。