Vue - Фоновое изображение не перерисовывается при изменении состояния - PullRequest
Новая
       10

Vue - Фоновое изображение не перерисовывается при изменении состояния

1 голос
/ 09 октября 2019

У меня есть компонент Vue с div, где URL-адрес фонового изображения div определяется реквизитом.

Первое фоновое изображение, которое я установил на div, работает нормально. Но когда в опору вносятся последовательные изменения (imageUrl), изображение не отображается.

Если я открою инструменты разработчика в Safari, вручную сниму флажок со стилем background-image и снова проверю его, изображение будет правильно отображено.

Я попытался заключить URL в одинарные кавычки,используя синтаксис стиля объекта и используя атрибут ключа для принудительного обновления компонента , но ни один из них не работал.

Браузер представляет собой WebKit WebView в приложении для iOS на симуляторе iPad.

Вот компонент: 

<template>
  <div class="my-image" :style="{ 'background-image': bgImage }">Some content</div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';

@Component()
export default class MyImage extends Vue {
  @Prop() imageUrl!: string;

  bgImage = 'none';

  @Watch('imageUrl')
  handleBgChange(value: string) {
    this.bgImage = `url('${value}')`;
    this.$forceUpdate();
  }
}
</script>

<style scoped lang="scss">
.my-image {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-top: 56.25%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
</style>

Пробовал также следующий код, который тоже не работал: 

<template>
  <div class="my-image" :style="{ 'background-image': 'url(\'' + imageUrl + '\')' }">Some content</div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component()
export default class MyImage extends Vue {
  @Prop() imageUrl!: string;
}
</script>

<style scoped lang="scss">
.my-image {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-top: 56.25%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
</style>
...