关于#vue.js#的问题：在自带的home中写的get来请求这个网址内处理好的数据，但是我的页面上并没有可视化的图像来显示

Question

在自带的home中写的get来请求这个网址内处理好的数据，请问大家这样写是正确的吗，但是我的页面上并没有可视化的图像来显示，检查了一下，看到了这个错误，请问大家怎么解决

Answer 1

【以下回答由 GPT 生成】

解决方案

问题定位

根据问题描述，你在Home组件中编写了一个GET请求，用来获取处理好的数据并展示在页面上，但页面上并没有显示出任何图像。在代码中查找，发现img标签中的src属性值为空字符串，所以没有显示图像。下面将介绍如何正确编写GET请求和数据展示的方法。

编写GET请求

在Vue.js中，可以使用Axios库来发送HTTP请求。首先，你需要在项目中安装并引入Axios。可以使用以下命令来安装Axios：

npm install axios

然后，在Home组件中的<script>标签中引入Axios：

import axios from 'axios';

接下来，你可以使用Axios来发送GET请求并获取数据。在Vue.js中，可以使用created生命周期钩子来发送GET请求。在这个钩子中，可以调用Axios的get方法来发送GET请求，并在请求成功后通过this.data来保存返回的数据。以下是示例代码：

export default {
  data() {
    return {
      data: [] // 保存返回的数据
    };
  },
  created() {
    axios.get('your-api-url') // 替换为你的GET请求的URL
      .then(response => {
        this.data = response.data; // 保存返回的数据
      })
      .catch(error => {
        console.error(error);
      });
  }
}

数据展示

在Vue.js中，可以使用Mustache语法（双大括号{{}}）来在模板中插入数据。在img标签的src属性中，可以使用Mustache语法来绑定数据，在请求成功后，img标签的src属性会被绑定的数据填充。

以下是修改后的代码示例：

<p></p>
<p class="md_img_container">
  <img class="md_img" :src="data.imageUrl1" alt="img" align="left" />
</p>
<p></p>
<p></p>
<p class="md_img_container">
  <img class="md_img" :src="data.imageUrl2" alt="img" align="left" />
</p>
<br />

在这个示例中，将img标签的src属性绑定到data.imageUrl1和data.imageUrl2，在请求成功后，这些属性会被实际的图像URL填充。

这是一个简单的示例，你可以根据自己的需求来修改和补充代码。

希望以上解决方案对你有帮助，如果有任何疑问，请随时追问。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^