Vue.js veri bağlama stili arka plan görüntüsü çalışmıyor

Bir öğedeki görüntünün src'sini bağlamaya çalışıyorum, ancak işe yaramıyor gibi görünüyor. "Geçersiz ifade. Oluşturulan işlev gövdesi: {backgroundImage: {url (image)}" alıyorum.

Dokümantasyon 'Kebap-harf' ya da 'deve-case' ya kullanmayı söylüyor.

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

İşte bir keman: https://jsfiddle.net/0dw9923f/2/

Buradaki sorun, değerinin backgroundImageşöyle bir dizge olması gerektiğidir:

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

İşte çalışan basitleştirilmiş bir keman: https://jsfiddle.net/89af0se9/1/

Re: kebap davası hakkında aşağıdaki yorum, bunu nasıl yapabilirsiniz:

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

Başka bir deyişle, değeri v-bind:styleyalnızca düz bir Javascript nesnesidir ve aynı kuralları izler.

GÜNCELLEME: Bunu çalıştırmakta neden sorun yaşayabileceğinizle ilgili başka bir not.

imageDeğerinizin tırnak içine alındığından emin olmalısınız, böylece sonuçta ortaya çıkan dize:

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

Aksi takdirde, resim URL'nizde özel karakterler (boşluk veya parantez gibi) varsa, tarayıcı bunu düzgün bir şekilde uygulamayabilir. Javascript'te ödev şöyle görünecektir:

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

veya

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

Teknik olarak, bu şablonda yapılabilir, ancak onu geçerli HTML olarak tutmak için gereken kaçış buna değmez.

Daha fazla bilgi burada: url () değerinden alıntı yapmak gerçekten gerekli mi?

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

Başka bir çözüm:

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

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

Bu çözümü daha uygun kılan nedir? Birincisi, daha temiz. Ve sonra, Vue CLI kullanıyorsanız (kullandığınızı varsayıyorum), webpack ile yükleyebilirsiniz.

Not: Bunun require()her zaman geçerli dosyanın yoluna göre olduğunu unutmayın .

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

birden çok yol var ama şablon dizesini kolay ve basit buldum

V-for döngüsünden dinamik bir değer kullanarak arka plan görüntüsü stilini bağlama bu şekilde yapılabilir.

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

Tekrarlanan tek bileşen için bu teknik benim için çalışıyor

<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 cevabını denedim ve sorunumu çözmedi. bir sürü güçlükten sonra, bir yöntem yaptım ve görüntüyü stil dizesiyle döndürdüm.

HTML Kodu

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

Yöntem

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

Dosya adında boşluklar bulunan arka plan resimlerinin stilin uygulanmamasına neden olduğu bir sorunla karşılaştım. Bunu düzeltmek için, dize yolunun tek tırnak içine alınmasını sağlamalıydım.

Aşağıdaki örneğimde \ 'kaçanına dikkat edin.

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

Kabul edilen cevap sorunu benim için çözmedi, ama bu çözdü

BackgroundImage bildirimlerinizin url'ye sarıldığından emin olun (ve tırnak işaretleri, dosya adı ne olursa olsun stil doğru çalışır.

ES2015 Tarzı:

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

Veya ES2015 olmadan:

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

Kaynak: vuejs / vue-loader sorunu # 646

Bildiğim kadarıyla, görüntü klasörünüzü ortak klasörünüze koyarsanız, aşağıdakileri yapabilirsiniz:

   <div :style="{backgroundImage: `url(${project.imagePath})`}"></div>

Görüntülerinizi koyarsanız src/assets/, gerekli kullanmanız gerekir. Bunun gibi:

   <div :style="{backgroundImage: 'url('+require('@/assets/'+project.image)+')'}">. 
   </div>

Önemli bir şey, bunun gibi tam URL'yi içeren bir ifade kullanamamanızdır project.image = '@/assets/image.png'. Parçayı kodlamanız gerekir '@assets/'. Bulduğum şey buydu. Bence bunun nedeni, Webpack'te, gereksiniminiz ifadeler içeriyorsa bir bağlam oluşturulur, bu nedenle tam modül derleme zamanında bilinmez. Bunun yerine, @/assetsklasördeki her şeyi arayacaktır . Daha fazla bilgi burada bulunabilir . Burada başka bir belge , Vue yükleyicinin bağlantıyı tek dosya bileşenlerinde nasıl ele aldığını açıklamaktadır.