Vue.js data-bind style backgroundImage tidak berfungsi

Saya mencoba untuk mengikat src dari sebuah gambar dalam sebuah elemen, tapi sepertinya tidak berhasil. Saya mendapatkan "Ekspresi tidak valid. Generated function body: {backgroundImage: {url (image)}".

The dokumentasi mengatakan untuk menggunakan 'Kebab-kasus' atau 'unta-kasus'.

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

Berikut biola: https://jsfiddle.net/0dw9923f/2/

Masalahnya adalah nilai untuk backgroundImageharus berupa string seperti ini:

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

Berikut biola sederhana yang berfungsi: https://jsfiddle.net/89af0se9/1/

Re: komentar di bawah tentang kebab-case, begini caranya:

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

Dengan kata lain, nilai untuk v-bind:stylehanyalah objek Javascript biasa dan mengikuti aturan yang sama.

PEMBARUAN: Satu catatan lain tentang mengapa Anda mungkin kesulitan membuatnya bekerja.

Anda harus memastikan imagenilai Anda dikutip sehingga string hasil akhir adalah:

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

Sebaliknya, jika URL gambar Anda memiliki karakter khusus di dalamnya (seperti spasi atau tanda kurung), browser mungkin tidak menerapkannya dengan benar. Dalam Javascript, tugasnya akan terlihat seperti:

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

atau

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

Secara teknis, ini bisa dilakukan di template, tetapi escaping yang diperlukan untuk menjaganya tetap valid HTML tidak sepadan.

Info lebih lanjut di sini: Apakah mengutip nilai url () benar-benar diperlukan?

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

Solusi lain:

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

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

Apa yang membuat solusi ini lebih nyaman? Pertama, lebih bersih. Dan kemudian, jika Anda menggunakan Vue CLI (saya asumsikan demikian), Anda dapat memuatnya dengan webpack.

Catatan: jangan lupa itu require()selalu berhubungan dengan jalur file saat ini.

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

Ada banyak cara tetapi saya menemukan string template mudah dan sederhana

Mengikat gaya gambar latar belakang menggunakan nilai dinamis dari v-for loop bisa dilakukan seperti ini.

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

Untuk satu komponen berulang, teknik ini bekerja untuk saya

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

Saya mencoba jawaban @david , dan itu tidak memperbaiki masalah saya. setelah banyak kerumitan, saya membuat metode dan mengembalikan gambar dengan gaya string.

Kode HTML

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

metode

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

Saya mengalami masalah di mana gambar latar belakang dengan spasi di nama file yang menyebabkan gaya tidak diterapkan. Untuk memperbaiki ini saya harus memastikan jalur string dienkapsulasi dalam tanda kutip tunggal.

Perhatikan escaped \ 'dalam contoh saya di bawah ini.

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

Jawaban yang diterima tampaknya tidak menyelesaikan masalah bagi saya, tetapi ini berhasil

Pastikan deklarasi backgroundImage Anda dibungkus dalam url (dan tanda kutip agar gayanya bekerja dengan benar, apa pun nama filenya.

Gaya ES2015:

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

Atau tanpa ES2015:

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

Sumber: masalah vuejs / vue-loader # 646

Berdasarkan pengetahuan saya, jika Anda meletakkan folder gambar Anda di folder publik Anda, Anda bisa melakukan hal berikut:

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

Jika Anda memasukkan gambar Anda ke dalamnya src/assets/, Anda perlu menggunakan Requirement. Seperti ini:

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

Satu hal yang penting adalah Anda tidak dapat menggunakan ekspresi yang berisi URL lengkap seperti ini project.image = '@/assets/image.png'. Anda perlu hardcode '@assets/'bagian tersebut. Itulah yang saya temukan. Saya pikir alasannya adalah bahwa di Webpack, konteks dibuat jika kebutuhan Anda berisi ekspresi, jadi modul yang tepat tidak diketahui pada waktu kompilasi. Sebagai gantinya, ini akan mencari semua yang ada di @/assetsfolder. Info lebih lanjut dapat ditemukan di sini . Berikut adalah dokumen lain yang menjelaskan bagaimana Vue loader memperlakukan tautan dalam komponen file tunggal.