如何绑定：样式与对象语法和多个背景图像？

Question

I want to bind css style with the object syntax to an image. the style object contains the css property background refering to multiple background images. Unfortunately, these images are not displayed.

Template

<v-img
    :src="require('../assets/background/bg_0.png')"
    :style="bg"
></v-img>

Script

data() {
    return {
        bg: {
            background: "url('~@/assets/pieces/animals/animal_1.png') no-repeat center, url('~@/assets/pieces/animals/animal_3.png') no-repeat center",
            width: "300px",
            height: "300px"
    }
}
}

The properties for width and height are working, but the two images from background are not displayed.

What am i doing wrong?

Thanks for your help!

Answer 1

The background CSS is technically correct, but I believe your issue is the image path. That path prefix ~@ won't work here because you haven't required the image so Webkit doesn't know about it. My recommendation would be to require the image first and then pass it as a constant to the bg object. That would clean things up by splitting code up over multiple lines and still allow you to use your path prefix for the dynamic URLs.

Something like this

const animal1 = require('~@/assets/pieces/animals/animal_1.png')
const animal3 = require('~@/assets/pieces/animals/animal_3.png')
data() {
    return {
        bg: {
            background: `url(${animal1}) no-repeat center, url(${animal3}) no-repeat center`,
            width: "300px",
            height: "300px"
        }
    }
}