Как склеить поле URL изображения, возвращаемое сервером, и правильно загрузить img в vue?

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