Как вернуть строку из Обещания

Question

Я работаю над сайтом с vue, где мне нужно получить изображения с аксио с сервера и поместить их в качестве фоновых изображений div.Дело в том, что у меня есть URL-адреса, но не все из них являются правильными.Поэтому я пытаюсь создать функцию, которая делает http-запрос и возвращает мне URL-адрес, если этот запрос успешен.

Я думал о чем-то вроде этого:

Шаблон:

<div class="element" :style="bgImg(url)"/>

Сценарий:

methods: {
  bgImg(url) {
    axios.get(url)
      .then(response => {
        return `background-image: url(${response.config.url})`;
      })
      .cath(e) {
        throw new Error(e);
      }
  }
}

Я ожидал получить URL-адрес, возвращенный из этой функции, но ничего не происходит.

Answer 1

Вы можете использовать для этой работы пользовательскую директиву vue :

Vue.directive('validate-bgimg', function (el, binding) {  
  el.style.backgroundImage = null  // reset 
  var url = binding.value
  if (!url) {
    return
  }
  axios.get(`https://cors-anywhere.herokuapp.com/${url}`)  // get around CORS limitations. Idealy you should call your own api to validate image urls
  .then(response => {
    if (response.status != 200) {
      console.warn("Invalide image url", url, response)
    } else {
      el.style.backgroundImage = `url(${url})`
    }
  })
  .catch(e => {
    console.error("Could not validate image", url, e)
  })
})


new Vue({
  el: "#app",
  data: {
  	imgUrl: undefined
  }
})

#app {
  background: lightgray;
  border-radius: 4px;
  padding: 20px;
  margin: 20px;
  transition: all 0.2s;
}

.element {
  margin: 8px 0;
  width: 200px;
  height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <b>test case:</b>
  <button @click="imgUrl='https://dummyimage.com/200x200/000/fff.gif&text=test+1'">1</button>
  <button @click="imgUrl='https://dummyimage.com/200x200/000/fff.gif&text=test+2'">2</button>
  <button @click="imgUrl='https://dummyimage.com/200x200/000/fff.gif&text=test+3'">3</button>
  <button @click="imgUrl='https://httpbin.org/status/404'">HTTP 404</button>
  <button @click="imgUrl='https://httpbin.org/status/503'">HTTP 503</button>
  <button @click="imgUrl='https://invalid.tld'">cannot resolve domain name</button>
  
  <div class="element" v-validate-bgimg="imgUrl"/>
</div>

Answer 2

Вместо возврата из обратного вызова then () (который передаст результат блока следующему then ()), вы можете сохранить данные, которые вы ищете, из объекта ответа для использования вне обещания.

Answer 3

Используйте вычисленное или временное значение, это облегчит задачу.

В этом решении вы бы задали изображение-заполнитель, которое будет отображаться при загрузке (или оставьте пустым).

Затем используйтехук mounted() для загрузки данных, а затем назначить стиль

Шаблон:

<div class="element" :style="imgStyle"/>

Сценарий:

data:{
  return () => {
    imgStyle: {
       'background-image': 'url(my-placeholder.png)' // or not included at all
    }
  }
},
mounted() {
  axios.get(url)
    .then(response => {
      this.$set(this.imgStyle, 'background-image', `url(${response.config.url})`);
    })
    .cath(e) {
      throw new Error(e);
    }
}

В качестве примечания, попробуйтедержитесь подальше от функций в шаблонах для отображения значений, которые можно выполнить с помощью вычислений.

Answer 4

You should use setAttribute method.

 //add id to the element
<div id="element" class="element" />

var url = url(${response.config.url});

// select the element using id and set image
document.getElementById("element").setAttribute("style", "background-image:"+ url);