Vue.js data-bind style backgroundImage не работает

89

Я пытаюсь привязать src изображения к элементу, но, похоже, это не работает. Я получаю сообщение «Недопустимое выражение. Созданное тело функции: {backgroundImage: {url (image)}».

В документации говорится, что можно использовать «футляр для кебаба» или «футляр для верблюда».

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

Вот скрипка: https://jsfiddle.net/0dw9923f/2/

javascript html css vue.js CosX
источник

Ответы:

208

Проблема в том, что значение 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 ()?

Дэвид К. Гесс
источник
15
по состоянию на март 2016 года это также должно быть camel case ( backgroundImage), а не kebab case ( background-image), хотя в документации указано, что это может быть и то, и другое.
andrewtweber 01
2
Если кто-то такой дурак, как я, ты мог бы поступить backgroundImage: imageвместо него backgroundImage: 'url('+image+')'. Я так зациклился на синтаксисе vue, что забыл о url().
bendytree 06
Внутри компонента Vue это сработало для меня v-bind:style="{ 'background-image': url(image) }", но за пределами компонента (только на обычной странице), похоже, потребовалось поместить URL-адрес в кавычки. Кто-нибудь знает, почему это может быть?
Кеара
2
@David Я думаю, что на самом деле был метод URL, который я написал и забыл, и он делает именно то, что я ожидал ... это довольно весело. Я не могу действительно протестировать его на скрипке, потому что компоненты Vue находятся в отдельных файлах, но я уверен, что это именно то, что вызвало странное поведение в конце концов. Благодарность!
Keara
1
Отсутствие цитат было моей проблемой. Спасибо за это, зря тратил здесь часы!
DonMB
29 
<div :style="{'background-image': 'url(' + require('./assets/media/img.jpg') + ')'}"></div>
Мохаммад Назари
источник
14

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

<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()это всегда относительно пути к текущему файлу.

Эгдавид
источник
4 
<div :style="{ backgroundImage: `url(${post.image})` }">

есть несколько способов, но я нашел строку шаблона простой и простой

чавкать
источник
1
Пришел сюда, чтобы опубликовать это. Определенно лучший метод с ES6.
Corysimmons
Шаблонный литерал ES5 кажется новым подходом. Связки хромые are
zEELz
3

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

<div v-for="i in items" :key="n" 
  :style="{backgroundImage: 'url('+require('./assets/cars/'+i.src+'.jpg')+')'}">
</div>
Абдельсалам Шахлол
источник
Мне очень жаль, я не помню, как нажимал кнопку "против". Должно быть, случилось случайно. Отменено.
mtsz
@mtsz не беспокойся.
Абдельсалам Шахлол
2

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

<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+')'
                }
            },
}
coder618
источник
2

Я попробовал ответить @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 + '")';
},
Девзакир
источник
1

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

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

<div :style="{
    height: '100px',
    backgroundColor: '#323232',
    backgroundImage: 'url(\'' + event.image + '\')',
    backgroundPosition: 'center center',
    backgroundSize: 'cover'
    }">
</div>
WDuffy
источник
0

Принятый ответ, похоже, не решил проблему для меня, но это помогло

Убедитесь, что ваши объявления backgroundImage заключены в URL-адрес (и кавычки, чтобы стиль работал правильно, независимо от имени файла.

ES2015 Стиль:

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

Или без ES2015:

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

Источник: vuejs / vue-loader issue # 646

бматову
источник