Load images dynamically with webpack

Question

I'm running a webpack web app on AWS S3 and I have to dynamically show images. I found this following code thanks to this post:

getImgUrl(nameImage) {
    let images = require.context("../static/images/members/", false, /\.jpg$/);
    return images("./" + nameImage + ".jpg");
}

And in my vuetify template:

<template v-else-if="activeTab == 0">
    <img
       :src="getImgUrl(chunk[i-1])"
    />
</template>

The problem is the images are not loaded as my aws server returns a 403 Forbidden error strict origin when cross origin.

That's weird because I don't have any problem with another image that I load in my topbar with this code:

<v-img
    :alt="appName"
    class="shrink mr-2"
    contain
   :src="require('../static/images/logo.jpg').default"
   width="40"
   height="40" 
/>

Do you have any other idea how I could require my images dynamically ?

score 0 · Accepted Answer · answered Feb 28 '22 at 13:10

Nevermind, I just had to add .default to the value to return:

getImgUrl(nameImage) {
    let images = require.context("../static/images/members/", false, /\.jpg$/);
    return images("./" + nameImage + ".jpg").default;
}

Remember kids: if require() doesn't work, just add .default at the end #SuperSmart

To be true I didn't understand why I had to do this, but if you know feel free to tell me in the comments

Load images dynamically with webpack

1 Answers1