How to splice an image URL field returned by the server and load the img correctly in the vue?

This is an example,This is the data returned by the server:

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

this html:

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

this 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 => {});
    }
}

Now the problem is that img doesn't show images

The reason is that axios doesn't return anything. What should I do? Using synchronization?

How do you gracefully load images in a vue?

Can you help me?