css - Vue3 css 背景图像注入
问题描述
从我之前的问题构建,我现在不仅要向我的作用域 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:配置文件:
包.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>
推荐阅读
- unity3d - 统一轮换问题
- algorithm - 计算以最小移动排列块的最优解
- c++ - 智能指针,为什么在更改底层对象之前需要检查我是否是唯一的用户?
- pandas - 熊猫删除索引列
- reactjs - react-router 将先前的路由道具传递给子路由
- python-2.7 - 在张量流中解释 sess.run 的输出
- python - 如何根据条件在 Pandas 中构建新列(新列应输出字符串)
- pandas - 多级分组按子人群百分比
- python - 如何覆盖 Django Rest Framework viewset perform_create() 方法以将默认值设置为字段
- python - 具有原始二进制数据的 np.ndarray 上的 Python3 管道 I/O 失败