Question

这是一个示例，这是服务器返回的数据：

[
{
        "Id":8,
        "Title":"123123",
        "Creatorid":1,
        "ImgUrl":"\upload\images\item\banner\1.jpeg",
        "Content":null
    },
    {
        "Id":9,
        "Title":"123",
        "Creatorid":1,
        "ImgUrl":"\upload\images\item\banner\2.jpeg",
        "Content":null
    },
    {
        "Id":10,
        "Title":"",
        "Creatorid":1,
        "ImgUrl":"\upload\images\item\banner\3.jpeg",
        "Content":null
    }
]

此html：

<el-table :data="homeTableData" style="width: 100%">
            <el-table-column label=“image” width="300">
              <template slot-scope="scope">
                <span>{{scope.row.ImgUrl}}</span>
                <img :src="getImage(scope.row.ImgUrl)" alt=“loding” style="width:50px; height:50px;">
              </template>
            </el-table-column>
</el-table>

此js：

  methods: {

    getImage(src) {
      console.log(src);
      let temp = "test:8080/website/" + src;
      this.$axios
        .get(temp)
        .then(res => {
          console.log("ccc",res)
          return res;
        })
        .catch(error => {});
    }
}

现在问题是img不显示图像

原因是axios不返回任何内容。我该怎么办？使用同步吗？

但返回的内容是请求URL：

http://localhost:8080/website/upload/images/item/banner/ [object % 20 promise]

您如何优雅地在vue中加载图像？

你能帮我吗？

Answer 1

您没有从函数返回任何内容。返回this.$axios请求。另外，此请求是异步的，因此最好等待函数返回数据：

methods: {
    async getImage(src) {
      console.log(src);
      let temp = "test:8080/website/" + src;
      return await this.$axios
        .get(temp)
        .then(res => {
          console.log("ccc",res)
          return res;
        })
        .catch(error => {});
    }
}

如何拼接服务器返回的图像URL字段并将img正确加载到Vue中？

1 个答案: