使用 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?

Answer 1

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