如何使用 API 生成的 URL 在 Vue 中设置背景图像的值

Question

我正在尝试将我在 Vue 中的#app 元素的背景图像的值设置为从 Unsplash 的 API 生成的响应。我能够检索图像 URL，但我在尝试将该信息传递给背景样式元素时遇到了一些困难。

总的来说，我的目标是使用随机图像并在每次重新加载页面时将其显示在屏幕上。

我的方法：

我从方法部分的 Unsplash API 中拉下了 URL
然后我在数据部分创建了一个图像并将其设置为等于包含 URL
最后，我将模板部分中的样式属性设置为 :style="image"

这对我不起作用。我想过使用计算属性，但我什至不确定从哪里开始。

此外，由于我在背景上有一个线性渐变属性，改变图像部分是否会有效地删除背景上的线性渐变部分属性？

如果您能提供任何帮助，我们将不胜感激！谢谢

下面，我提供了我的 app.vue 文件

<template>
  <div id="app" :style="image">
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'App',
  data() {
    return {
      image: null,
    }
  },
  methods: {
    renderImage: function() {
      axios
        .get(
          'https://api.unsplash.com/photos/random/?client_id=MY_KEY'
        )
        .then(response => {
          console.log([response.data, response.data.location.title])
          this.image = response.data.urls.full
        })
    }
  },
  mounted: function() {
    this.renderImage()
  }
}
</script>

<style lang="scss">

#app {
  background: linear-gradient(
      to bottom,
      rgba(245, 246, 252, 0) 45%,
      rgb(0, 0, 0) 100%
    )
    no-repeat center fixed;
  background-size: cover;
}
</style>

Answer 1

遵循 Vue documentation 中的语法，试试这个

<template>
 ....
  <div id="app" :style="imageStyleObject">
....
</template>

data() {
  return {
    image: '',
  }
},
computed: { // will be re-computed when the image property changes
  imageStyleObject() {
    return {
      backgroundImage: `url(${this.image})`...
      // insert other styles
    }
  }
}

关于问题的第二部分，不，我看不出线性渐变应该受到影响的原因。

如何使用 API 生成的 URL 在 Vue 中设置背景图像的值

How to set the value of a background Image in Vue using a URL generated by an API

javascript

css

api

background

vue.js