vue2中img标签设置http请求地址作为src地址渲染

在Vue 2中，如果你想在`<img>`标签上动态地设置HTTP请求的URL作为`src`地址，并等待数据加载后再渲染图片，你可以结合Vue的数据绑定和事件处理机制来实现。这里是一个简单的示例：

<template>
  <div>
    <img :src="imageUrl" v-if="imageUrl && imageUrl.length > 0">
    <button @click="fetchImage">获取图像</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: null, // 初始值设为空字符串
    };
  },
  methods: {
    fetchImage() {
      // 使用axios或其他库发起HTTP GET请求
      axios.get('your-image-url-here')
        .then(response => {
          this.imageUrl = response.data.url; // 将返回的url赋给imageUrl
        })
        .catch(error => {
          console.error('Error fetching image:', error);
        });
    },
  },
};
</script>

在这个例子中，当你点击“获取图像”按钮时，`fetchImage`方法会被触发，它会发送一个GET请求到指定的URL。一旦请求成功，响应数据中的`url`字段会被设置为`imageUrl`属性，从而使得`<img>`标签可以展示请求来的图片。