Vue3 css 背景图片注入

问题描述

从我的 previous question 构建，我现在不仅希望将变量注入到我的作用域 css 中，而且还希望注入一个 url 图像。我尝试了几种组合，但似乎都不起作用：

<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>

有什么建议吗？

PD：配置文件：

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'],}

解决方法

尝试require图像：

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

然后：

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