我正在使用 vue 开发一个网站,我必须使用 axios 从服务器获取图像并将它们作为 div 的背景图像。情况是我有网址,但并非所有网址都是正确的。因此,我尝试创建一个函数来发出 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,但什么也没发生。
最佳答案
您可以使用 custom vue directive对于该工作:
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>
关于javascript - 如何从 Promise 返回字符串,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54933519/