Vue.js data-bind style background Hình ảnh không hoạt động

Tôi đang cố gắng liên kết src của một hình ảnh trong một phần tử, nhưng nó dường như không hoạt động. Tôi nhận được thông báo "Biểu thức không hợp lệ. Nội dung hàm đã tạo: {backgroundImage: {url (image)}".

Các tài liệu cho biết sử dụng một trong hai 'Kebab hợp cụ thể' hoặc 'lạc đà hợp cụ thể.

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

Heres a fiddle: https://jsfiddle.net/0dw9923f/2/

Vấn đề là giá trị cho backgroundImagecần phải là một chuỗi như sau:

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

Đây là một fiddle đơn giản đang hoạt động: https://jsfiddle.net/89af0se9/1/

Re: bình luận bên dưới về kebab-case, đây là cách bạn có thể làm điều đó:

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

Nói cách khác, giá trị for v-bind:stylechỉ là một đối tượng Javascript thuần túy và tuân theo các quy tắc tương tự.

CẬP NHẬT: Một lưu ý khác về lý do tại sao bạn có thể gặp khó khăn khi làm việc này.

Bạn nên đảm bảo rằng imagegiá trị của bạn được trích dẫn để chuỗi kết quả cuối cùng là:

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

Mặt khác, nếu URL hình ảnh của bạn có các ký tự đặc biệt trong đó (chẳng hạn như khoảng trắng hoặc dấu ngoặc đơn), trình duyệt có thể không áp dụng đúng cách. Trong Javascript, bài tập sẽ giống như sau:

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

hoặc là

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

Về mặt kỹ thuật, điều này có thể được thực hiện trong mẫu, nhưng yêu cầu thoát để giữ HTML hợp lệ là không đáng.

Thông tin thêm tại đây: Việc trích dẫn giá trị của url () có thực sự cần thiết không?

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

Giải pháp khác:

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

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

Điều gì làm cho giải pháp này thuận tiện hơn? Thứ nhất, nó sạch hơn. Và sau đó, nếu bạn đang sử dụng Vue CLI (tôi cho là bạn có), bạn có thể tải nó bằng webpack.

Lưu ý: đừng quên rằng require()nó luôn liên quan đến đường dẫn của tệp hiện tại.

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

có nhiều cách nhưng tôi thấy chuỗi mẫu dễ và đơn giản

Kiểu hình ảnh nền ràng buộc bằng cách sử dụng giá trị động từ vòng lặp v-for có thể được thực hiện như thế này.

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

Đối với một thành phần lặp lại duy nhất, kỹ thuật này làm việc cho tôi

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

Tôi đã thử câu trả lời @david và nó không khắc phục được sự cố của tôi. sau rất nhiều rắc rối, tôi đã tạo một phương thức và trả về hình ảnh với chuỗi kiểu.

Mã HTML

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

phương pháp

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

Tôi đã gặp sự cố trong đó hình nền có khoảng trắng trong tên tệp khiến kiểu không được áp dụng. Để sửa lỗi này, tôi phải đảm bảo đường dẫn chuỗi được gói gọn trong các dấu nháy đơn.

Lưu ý thoát \ 'trong ví dụ của tôi bên dưới.

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

Câu trả lời được chấp nhận dường như không giải quyết được vấn đề cho tôi, nhưng điều này đã

Đảm bảo khai báo backgroundImage của bạn được bao bọc trong url (và dấu ngoặc kép để kiểu hoạt động chính xác, bất kể tên tệp.

Phong cách ES2015:

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

Hoặc không có ES2015:

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

Nguồn: vuejs / vue-loader issue # 646