Vue.js Dynamic Image paths after compiling/runtime

Question

I am having a problem setting dynamic image paths with Vue.js. I am using the Vue-Cli to build the project.

I believe the issue is caused because I am referencing image paths dynamically after runtime. Normally it seems the references to my ./assets/ folder are converted into ./img/ after runtime. Since I am changing the url dynamically after load the paths don't appear to work/load. Country is initially set via a store getters but is then v-modeled from a language select dropdown, where the values correspond the the url suffix.

    <div id="flag-container" :style="{ backgroundImage: `url(${src})` }"></div>

    computed: {
            src(){
                return `./assets/flags/flag-${this.country}.png`;
            }
        },

    data() {
        return {
            country: this.$store.getters.language
        }
    }

Inspector shows url change is implemented.

Any recommendation on the best solution for this?

In devtools did you inspect the network tab? Are the images linked properly? Do they exist on the server? Inspector shows url change is implemented. so when you inspect the dom, you can see that url() is correctly set when you change country? — ljubadr
– ljubadr, Commented Jan 10, 2019 at 22:13
Can you add example of rendered <div id="flag-container" ...> — ljubadr
– ljubadr, Commented Jan 10, 2019 at 22:13
<div id="flag-container" style="background-image: url("./assets/flags/flag-ru-RU.png");"></div> Yes, I see the change implemented in the HTML but get no render of the image. — Michael Paccione
– Michael Paccione, Commented Jan 10, 2019 at 23:05
@MichaelPaccione not only individual images, just add require, check this webpack docs section webpack.js.org/guides/dependency-management/… — Max Sinev
– Max Sinev, Commented Jan 11, 2019 at 9:39

Rubén S. García · Accepted Answer · 2022-02-18 19:25:38Z

2

Using webpack require context and beforeMount, I was able to store the images in base64 format inside an object. I stored the object and accessed it with a dynamic key. Thanks Max for leading me to the right documentation.

export default {
  beforeMount() {
    var that = this;
    function importAll(r) {
      r.keys().forEach((key) => (that.imgCache[key] = r(key)));
    }

    importAll(require.context("../assets/flags/", true, /\.png$/));
  },
  computed: {
    src() {
      var key = `./flag-${this.country}.png`,
        url = this.imgCache[key];

      return url;
    },
  },
};

edited Feb 18, 2022 at 19:25

Rubén S. García

7499 silver badges25 bronze badges

answered Jan 11, 2019 at 18:55

Michael Paccione

2,8978 gold badges45 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ljubadr · Accepted Answer · 2019-01-10 23:43:01Z

0

Don't use

data() {
    return {
        country: this.$store.getters.language
    }
}

as it will stop being reactive to store changes. Use computed property

<div id="flag-container" :style="{ backgroundImage: `url(${src})` }"></div>

computed: {
    src(){
        return `./assets/flags/flag-${this.country}.png`;
    },
    country() {
        return this.$store.getters.language
    }
},

answered Jan 10, 2019 at 23:43

ljubadr

2,2741 gold badge24 silver badges27 bronze badges

1 Comment

Michael Paccione Over a year ago

I understand what you are saying with your data flow... having the store be the master source and updating from that. What I have on this component instead is local data values that are v-modeled and then @change I update the store. So it is not from what I can see the issue as I am seeing the URL change when i change my select.

Collectives™ on Stack Overflow

Vue.js Dynamic Image paths after compiling/runtime

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related