vue.js – Vue bind style dynamic backgroundImage with parameter using asset

vue.js – Vue bind style dynamic backgroundImage with parameter using asset

inlineBgImage(src) {
    let fileExt = src.substring(src.lastIndexOf(.))

    src = src.replace(/img/, )
    src = src.replace(fileExt, )

    let bgImage = require(@/assets/img/ + src + fileExt)

    return {
        backgroundImage: `url(${bgImage})`,
    }
}

Kudos to skirtle for giving a solution at forum.vuejs.org. As skirtle mentioned, Webpack handles expression and fixed string parameter differently. I did change the solution a bit in case future files have different file extension. You see skirtle original answer and explanation there.

vue.js – Vue bind style dynamic backgroundImage with parameter using asset

Leave a Reply

Your email address will not be published.