vue显示ftp上的图片

要在Vue中显示FTP上的图片，可以使用以下步骤：

1. 首先，确保你的Vue项目已经安装了依赖的插件，可以使用`npm`或`yarn`来安装。

2. 创建一个Vue组件，用于显示FTP上的图片。可以在你的项目中的`components`目录下创建一个新的组件，例如`FtpImage.vue`。

3. 在`FtpImage.vue`组件中，引入Vue的`axios`库，用于发送HTTP请求。

// FtpImage.vue
<template>
  <div>
    <img :src="imageUrl" alt="FTP Image" />
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      imageUrl: ''
    };
  },
  mounted() {
    // 在组件加载完成后，发送HTTP请求获取FTP上的图片
    axios.get('ftp://example.com/path/to/image.jpg', {
      responseType: 'arraybuffer'
    })
      .then(response => {
        // 将获取到的图片数据转换为Base64编码的字符串
        const imageBase64 = btoa(
          new Uint8Array(response.data)
            .reduce((data, byte) => data + String.fromCharCode(byte), '')
        );
        // 拼接Base64编码的图片字符串
        this.imageUrl = `data:image/jpeg;base64,${imageBase64}`;
      })
      .catch(error => {
        console.error('Failed to fetch FTP image:', error);
      });
  }
};
</script>

4. 在需要显示FTP图片的地方，使用`<ftp-image></ftp-image>`标签引入刚刚创建的组件。

<template>
  <div>
    <ftp-image></ftp-image>
  </div>
</template>

<script>
import FtpImage from '@/components/FtpImage.vue';

export default {
  components: {
    FtpImage
  }
};
</script>

将`ftp://example.com/path/to/image.jpg`替换为你实际的FTP图片地址。当组件加载完成后，它会发送HTTP请求获取FTP上的图片，并将其显示在页面上。

请注意，由于浏览器的安全限制，直接在`<img>`标签的`src`属性中引用FTP链接是不允许的。因此，我们需要使用HTTP请求获取图片数据，并将其转换为Base64编码的字符串，然后再将其赋值给`<img>`标签的`src`属性。