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