Vue.js привязана к данным стиль backgroundImage не работает

Ответ 1

Проблема в том, что значение для backgroundImage должно быть строкой, подобной этой:

<div class="circular" v-bind:style="{ backgroundImage: 'url(' + image + ')' }"></div>

Вот упрощенная скрипка, которая работает: https://jsfiddle.net/89af0se9/1/

Re: комментарий ниже о кебаб-кейсе, вот как вы можете это сделать:

<div class="circular" v-bind:style="{ 'background-image': 'url(' + image + ')' }"></div>

Другими словами, значение для v-bind:style является простым объектом Javascript и следует тем же правилам.

ОБНОВЛЕНИЕ: Еще одно замечание о том, почему у вас могут возникнуть проблемы с этим.

Вы должны убедиться, что значение вашего image заключено в кавычки так, чтобы конечная полученная строка была:

url('some/url/path/to/image.jpeg')

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

this.image = "'some/url/path/to/image.jpeg'"

или же

this.image = "'" + myUrl + "'"

Технически это можно сделать в шаблоне, но экранирование, необходимое для поддержания его в правильном HTML, не стоит.

Больше информации здесь: действительно ли нужно указывать значение url()?

Ответ 2

<div class="img-banner" :style="{'background-image': 'url(' + require('./assets/media/baner1.jpg') + ')'}"></div>

Ответ 3

Привязка стиля фонового изображения с использованием динамического значения из цикла v-for может быть выполнена следующим образом.

<div v-for="i in items" :key="n" 
  :style="{backgroundImage: 'url('+require('./assets/cars/'+i.src+'.jpg')+')'}">
</div>

Ответ 4

Для одного повторного компонента эта техника работает для меня

<div class="img-section" :style=img_section_style >

computed: {
            img_section_style: function(){
                var bgImg= this.post_data.fet_img
                return {
                    "color": "red",
                    "border" : "5px solid ",
                    "background": 'url('+bgImg+')'
                }
            },
}

Ответ 5

Я столкнулся с проблемой, когда фоновые изображения с пробелами в имени файла вызывали неприменение стиля. Чтобы исправить это, я должен был убедиться, что путь к строке был заключен в одинарные кавычки.

Обратите внимание на экранирование в моем примере ниже.

<div :style="{
    height: '100px',
    backgroundColor: '#323232',
    backgroundImage: 'url(\'' + event.image + '\')',
    backgroundPosition: 'center center',
    backgroundSize: 'cover'
    }">
</div>

Ответ 6

Другое решение:

<template>
  <div :style="cssProps"></div>
</template>

<script>
  export default {
    data() {
      return {
        cssProps: {
          backgroundImage: 'url(${require('@/assets/path/to/your/img.jpg')})'
        }
      }
    }
  }
</script>

Что делает это решение более удобным? Во-первых, это чище. И затем, если вы используете Vue CLI (я полагаю, вы используете), вы можете загрузить его через веб-пакет.

Примечание: не забывайте, что require() всегда относительно текущего пути к файлу.

Ответ 7

:style="{ backgroundImage: 'url('${src}')' }"