Vue bind style dynamic backgroundImage with parameter using asset

Question

I'm trying to bind background images dynamically but there seems to be trouble compiling the assets. What's weird is that it works but no at the same time.

I've tried various solutions from SO and nothing get rids of the compilation error (which still compile based on the image above):

• 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

How The Project is Set Up

Laravel Sanctum as the backend, Vue SPA for the frontend and utilising Axios for communications.

Topic.vue Component

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

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

In the inlineBgImage(src) methods, the background-image is successfully applied if the require is hardcoded i.e. let bgImage = require('@/assets/img/topic/myself.jpg'). Once I used the src value, it broked but still works(Failed to compile. page appear)

Assets

Below is the asset folder structure

All SCSS files are imported to app.scss which are then imported to main.js

_variables.scss

The "undefined variable" does exist

app.scss

This is how I import the _variable.scss file in app.scss; @import 'variables.scss';. The import comes first before other files.

I've also tried:

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

It still gives out errors.

Error Details in Terminal

I want to reiterate that these errors does not appear if I hardcode the bgImage e.g. require('@/assets/img/topic/myself.jpg'). I don't understand how these changes affect the compiler.

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

Other Details

The topic.src from v-for="topic in topics" will yield a String, for e.g. /img/topic/myself.jpg.

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

Kudos to skirtle for giving a solution at forum.vuejs.org. As skirtle mentioned, Webpack handles expression and fixed string parameter differently. I did change the solution a bit in case future files have different file extension. You see skirtle original answer and explanation there.