Vue绑定样式动态backgroundImage带参数使用asset

Posted 2023-02-22

【中文标题】Vue绑定样式动态backgroundImage带参数使用asset

【英文标题】：Vue bind style dynamic backgroundImage with parameter using asset

【发布时间】：2020-12-15 22:17:30

【问题描述】：

我正在尝试动态绑定背景图像，但编译资产似乎有问题。奇怪的是它可以工作，但不能同时工作。

我已经尝试了 SO 的各种解决方案，但没有任何东西可以解决编译错误（仍然根据上图进行编译）：

Vue.js dynamic images not working VueJS v-bind:style for background-image: url() Vue.js data-bind style backgroundImage not working reference assets with generated style data bind Vue dynamic background image inline component

项目是如何设置的

Laravel Sanctum 作为后端，Vue SPA 作为前端，并利用 Axios 进行通信。

Topic.vue 组件

<div
    v-for="topic in topics"
    :key="topic.id"
    class="col-12 col-sm-6 col-lg-3 mb-4 d-flex justify-content-center"
>
    <div
        class="card-topic d-flex align-items-end"
        :style="inlineBgImage(topic.src)"
    >
        <div class="card-topic__button py-3 text-center w-100">
            <a href class="card-topic__link"> topic.title </a>
        </div>
    </div>
</div>

Topic.vue 中的脚本

<script>
import  mapState  from 'vuex'

export default 
    computed: 
        ...mapState('topic', ['topics']),
    ,
    created() 
        this.$store.dispatch('topic/fetchTopics')
    ,
    methods: 
        inlineBgImage(src) 
            let bgImage = require('@/assets' + src)

            return 
                backgroundImage: `url("$bgImage")`,
            
        ,
    ,

</script>

在inlineBgImage(src) 方法中，如果要求是硬编码的，即let bgImage = require('@/assets/img/topic/myself.jpg')，则成功应用背景图像。一旦我使用了src 值，它就坏了但仍然有效（编译失败。出现页面）

资产

下面是资产文件夹结构

所有 SCSS 文件都导入到 app.scss，然后再导入到 main.js

_variables.scss

“未定义变量”确实存在

app.scss

这就是我在app.scss 中导入_variable.scss 文件的方式； @import 'variables.scss';。导入先于其他文件。

我也试过了：

@import 'variables'; @import '_variables'; @import '_variables.scss';

它仍然给出错误。

终端中的错误详情

我想重申，如果我硬编码 bgImage，这些错误不会出现。 require('@/assets/img/topic/myself.jpg')。我不明白这些更改如何影响编译器。

ERROR  Failed to compile with 6 errors                                                                                                  12:37:58 PM
 error  in ./src/assets/scss/card.scss

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
   ╷
16 │     background-color: $dark-blue;
   │                       ^^^^^^^^^^
   ╵
  src\assets\scss\card.scss 16:23  root stylesheet

 @ ./src/assets/scss/card.scss 4:14-233 14:3-18:5 15:22-241
 @ ./src sync ^\.\/assets.*$
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Topic.vue?vue&type=script&lang=js&
 @ ./src/views/Topic.vue?vue&type=script&lang=js&
 @ ./src/views/Topic.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.100.14:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./src/assets/scss/search.scss

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
   ╷
27 │     color: $blue;
   │            ^^^^^
   ╵
  src\assets\scss\search.scss 27:12  root stylesheet

 @ ./src/assets/scss/search.scss 4:14-235 14:3-18:5 15:22-243
 @ ./src sync ^\.\/assets.*$
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Topic.vue?vue&type=script&lang=js&
 @ ./src/views/Topic.vue?vue&type=script&lang=js&
 @ ./src/views/Topic.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.100.14:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./src/assets/scss/image.scss

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
   ╷
33 │     color: $white;
   │            ^^^^^^
   ╵
  src\assets\scss\image.scss 33:12  root stylesheet

 @ ./src/assets/scss/image.scss 4:14-234 14:3-18:5 15:22-242
 @ ./src sync ^\.\/assets.*$
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Topic.vue?vue&type=script&lang=js&
 @ ./src/views/Topic.vue?vue&type=script&lang=js&
 @ ./src/views/Topic.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.100.14:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./src/assets/scss/button.scss

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
  ╷
2 │     color: $light-blue;
  │            ^^^^^^^^^^^
  ╵
  src\assets\scss\button.scss 2:12  root stylesheet

 @ ./src/assets/scss/button.scss 4:14-235 14:3-18:5 15:22-243
 @ ./src sync ^\.\/assets.*$
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Topic.vue?vue&type=script&lang=js&
 @ ./src/views/Topic.vue?vue&type=script&lang=js&
 @ ./src/views/Topic.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.100.14:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./src/assets/scss/header.scss

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
  ╷
4 │     background-color: $dark-blue;
  │                       ^^^^^^^^^^
  ╵
  src\assets\scss\header.scss 4:23  root stylesheet

 @ ./src/assets/scss/header.scss 4:14-235 14:3-18:5 15:22-243
 @ ./src sync ^\.\/assets.*$
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Topic.vue?vue&type=script&lang=js&
 @ ./src/views/Topic.vue?vue&type=script&lang=js&
 @ ./src/views/Topic.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.100.14:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./src/assets/scss/nav.scss

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
  ╷
6 │     color: $light-blue;
  │            ^^^^^^^^^^^
  ╵
  src\assets\scss\nav.scss 6:12  root stylesheet

 @ ./src/assets/scss/nav.scss 4:14-232 14:3-18:5 15:22-240
 @ ./src sync ^\.\/assets.*$
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Topic.vue?vue&type=script&lang=js&
 @ ./src/views/Topic.vue?vue&type=script&lang=js&
 @ ./src/views/Topic.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.100.14:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

其他详情

来自v-for="topic in topics" 的topic.src 将产生一个字符串，例如/img/topic/myself.jpg.

【问题讨论】：

是的，确实如此，正如我所提到的，硬编码它可以工作，但不是动态的。 @tony19 我已经编辑了帖子，显示它已定义

鉴于src 等于/img/topic/myself.jpg，let bgImage = require('@/assets/img/topic/myself.jpg') 不等于let bgImage = require('@/assets' + src)？

我什至不知道它是如何破坏样式的。这就是我寻求帮助的原因。如果你能在这个问题上指导我，我将不胜感激。

您在使用它们之前好像没有@import 和_variables.scss。

嘿，你提到后我尝试了各种说法。您可以从我所做的编辑中看到。我应该如何导入它@YomS.？

【参考方案1】：

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")`,
    

感谢skitlele 在forum.vuejs.org 提供解决方案。正如skitlele 提到的，Webpack 处理表达式和固定字符串参数的方式不同。如果将来的文件具有不同的文件扩展名，我确实对解决方案进行了一些更改。您会在此处看到裙子的原始答案和解释。