Vue.js data-bind style 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>

Другими словами, значение для 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 issue # 646