Vue.js стиль прив'язки даних backgroundImage не працює

Я намагаюся прив'язати src зображення в елементі, але, здається, це не працює. Я отримую "Недійсний вираз. Сформоване тіло функції: {backgroundImage: {url (image)}".

У документації сказано використовувати "футляр для шашлику" або "футляр для верблюдів".

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

Ось скрипка: https://jsfiddle.net/0dw9923f/2/

Проблема в тому, що значення для 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>

Іншими словами, значення for 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 ()?

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

Інше рішення:

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

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

Що робить це рішення більш зручним? По-перше, це чистіше. А потім, якщо ви використовуєте Vue CLI (я припускаю, що ви використовуєте), ви можете завантажити його за допомогою webpack.

Примітка: не забувайте, що require()це завжди відносно шляху поточного файлу.

<div :style="{ backgroundImage: `url(${post.image})` }">

Є багато способів, але я знайшов рядок шаблону простим і простим

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

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

Для одного повторного компонента ця техніка працює для мене

<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+')'
                }
            },
}

Я спробував відповідь @david , і це не вирішило моєї проблеми. після численних клопотів я зробив метод і повернув зображення із рядком стилю.

HTML-код

<div v-for="slide in loadSliderImages" :key="slide.id">
    <div v-else :style="bannerBgImage(slide.banner)"></div>
</div>

Метод

bannerBgImage(image){
    return 'background-image: url("' + image + '")';
},

У мене виникла проблема, коли фонові зображення з пробілами в імені файлу спричиняли неприйняття стилю. Щоб виправити це, мені довелося переконатися, що шлях до рядка був інкапсульований в одинарні лапки.

Зверніть увагу на "\" в моєму прикладі нижче.

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

Здається, прийнята відповідь не вирішила проблему для мене, але це зробило

Переконайтеся, що ваші декларації backgroundImage загорнуті в url (і лапки, щоб стиль працював коректно, незалежно від назви файлу.

ES2015 Стиль:

<div :style="{ backgroundImage: `url('${image}')` }"></div>

Або без ES2015:

<div :style="{ backgroundImage: 'url(\'' + image + '\')' }"></div>

Джерело: vuejs / vue-loader випуск # 646