Блог

Главная - Вопросы по программированию - Динамическое фоновое изображение в vue.js

Динамическое фоновое изображение в vue.js

#javascript #vue.js

#javascript #vue.js

Вопрос:

это мой самый первый пост о переполнении стека, поэтому прошу прощения, если я делаю здесь что-то выходящее за рамки нормы.

у меня очень простой вопрос. я учусь Vue.js , и я хочу, чтобы какое-то фоновое изображение повторялось в моем ТЕЛЕ, но добавляло это изображение в динамическом режиме

до сих пор мне удавалось делать это в классическом DIV, например, в HTML-части кода:

 <template>
    <div  :style="{ backgroundImage: `url(${backgroundUrl})` }">test</div>
</template>

и в Vue.js сценарий у меня есть такой :

 <script>
import backgroundUrl from '~/artistes/ElzoDurt.jpg'
export default {
  data() {
    return {
      backgroundUrl
    }
  }
}
</script>

Теперь это отлично работает в DIV, потому что я использую ШАБЛОН
, но попытка того же трюка в ТЕЛЕ, похоже, не работает, потому что, если я когда-либо использую BODY в ШАБЛОНЕ, экран становится пустым!

Большое вам спасибо!

Комментарии:

1. Я только что создал простой пример с вашим примером, кажется, он работает нормально, хотя это неправильный способ сделать это.

2. Если вы хотите это сделать page body , вы должны использовать document.body и изменять стили в mounted или где угодно.

3. В Vue 2 вы можете либо сделать это для абсолютно позиционированного div с полной высотой / шириной, либо напрямую манипулировать <body> DOM, потому что вы не можете смонтировать Vue в <body> тег. В Vue 3 вы можете подключиться к <body> тегу.

4. Спасибо! мне нужно некоторое время, чтобы переварить это, я безуспешно попробовал первый метод из-за ШАБЛОНА, который оставляет все пустым, но мне нужно, наверное, постараться

Метки: