vue如何加载服务器本地上的图片

在Vue中加载服务器本地上的图片，如果图片位于前端静态资源目录（如`/static`或`/assets`），即使使用`<img>`标签并动态绑定`src`，也需要正确设置路径以避免跨域问题。以下是一些建议：

1. 使用绝对路径而非相对路径[^1]。因为Vue默认不会处理静态资源的路径，所以应直接写完整的URL，例如`"/static/charts.jpg"`。

<template>
  <img :src="/static/charts.jpg">
</template>

2. 如果图片是在Webpack的静态资产配置中处理过的，确保它们被正确地编译到构建后的dist目录中。在Webpack配置中，可以通过`file-loader`或`url-loader`插件来处理这些图片[^2]。

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192, // 设置图片小于此大小时会被转成base64
              fallback: 'file-loader'
            }
          }
        ]
      }
    ]
  }
};

3. 使用Vue的`axios`或`fetch`等库从后台API获取图片，而不是直接在HTML中引用。这样可以绕过浏览器对跨域请求的限制。

methods: {
  loadChartImage() {
    axios.get('/api/chart', { responseType: 'blob' })
      .then(response => {
        const imgURL = URL.createObjectURL(new Blob([response.data]));
        this.$refs.chartImg.src = imgURL;
      });
  }
}

记得在适当的时候清除`createObjectURL`创建的URL，比如在组件销毁时。