Vue3 css 背景图像注入

Question

Constructing from my previous question , I would like now to not only inject a variable to my scoped css, but to inject an url image. I've tried several combinations, but none seem to work:

<template>
    <header class="header">
    </header>
</template>
<script>
import { ref, defineComponent, computed } from 'vue'
export default defineComponent({
    components: { },
    setup() {
        const cssVars = ref()
        cssVars.value = {myImage: '"hero-small.jpg"'}
        const imageBind = computed(() => '"../../assets/img/hero-small.jpg"')
        return {
            cssVars,
            imageBind,
        }
    },
})
</script>

<style lang="scss" scoped>
.header {
    background-image: url(v-bind(imageBind));
}
</style>

Any tips?

PD: CONFIG FILES:

package.json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.21.0",
    "bootstrap": "^4.5.3",
    "core-js": "^3.6.5",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1",
    "register-service-worker": "^1.7.1",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-pwa": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-airbnb": "^5.1.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.13.0",
    "eslint-plugin-import": "^2.22",
    "eslint-plugin-vue": "^7.1.0",
    "node-sass": "^5.0.0",
    "sass-loader": "^10.1.0"
  }
}

jsconfig.json

{
    "include": ["./src/**/*"],
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": ["./src/*"]
        }
    }
}

.eslintrc.js

module.exports = {
    root: true,
    env: {
        node: true,
    },
    extends: [
        'plugin:vue/vue3-essential',
        '@vue/airbnb', // https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb-base/rules
    ],
    parserOptions: {
        parser: 'babel-eslint',
    },
    rules: {
        'global-require': 0,
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

        // https://eslint.org/docs/rules/prefer-destructuring
        'prefer-destructuring': ['error', { object: true, array: false }],

        // https://eslint.org/docs/rules/max-len
        'max-len': [
            'warn',
            {
                code: 120,
                tabWidth: 4,
                ignoreUrls: true,
                ignoreComments: false,
                ignoreRegExpLiterals: true,
                ignoreStrings: true,
                ignoreTemplateLiterals: true,
            },
        ],

        // https://eslint.org/docs/rules/semi
        semi: ['off', 'never'],

        // https://eslint.org/docs/rules/indent
        indent: ['warn', 4],

        // https://eslint.org/docs/rules/no-underscore-dangle
        'no-underscore-dangle': ['off'],

        // https://eslint.org/docs/rules/class-methods-use-this
        'class-methods-use-this': ['off'],

        // https://eslint.vuejs.org/rules/no-multiple-template-root.html
        'no-multiple-template-root': ['off'],
    },
    overrides: [
        {
            files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
            env: {
                jest: true,
            },
        },
    ],
}

babel.config.js

module.exports = {
    presets: ['@vue/cli-plugin-babel/preset'],
}

Answer 1

Try out to require the image:

const imageBind = computed(() => require("../../assets/img/hero-small.jpg"))

then:

<style lang="scss" scoped>
.header {
    background-image: url(v-bind(imageBind));
}
</style>

Answer 2

As an alternative to setting the variable dynamically as a CSS class via v-bind() , it's also possible to bind as inline style :

<template>
    <header :style="{backgroundImage: `url('$imageUrl')`}"></header>
</template>

See https://vuejs.org/guide/essentials/class-and-style.html#binding-inline-styles