Vue3 css 背景图片注入

大佬教程收集整理的这篇文章主要介绍了Vue3 css 背景图片注入，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决Vue3 css 背景图片注入？

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

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

@H_696_5@{
  "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

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

.eslintrc.Js

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

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

解决方法

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

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

大佬总结

以上是大佬教程为你收集整理的Vue3 css 背景图片注入全部内容，希望文章能够帮你解决Vue3 css 背景图片注入所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。