My goal is to dockerize my vue app, but I am encountering issues when running it in a docker container as nothing loads in the browser.
To troubleshoot this issue, I decided to test it out locally by running npm run serve, which worked fine and produced the expected result:
https://i.sstatic.net/OWJwD.png
Next, I ran npm run build, resulting in:
https://i.sstatic.net/EwbOG.png
I suspect that the issue might be related to having a large number of jpeg images in the assets directory, specifically a posters folder with over 50,000 images that are dynamically displayed in the app using Vue:
<div v-for="movie in this.recommendations" :key="movie" class="movie-card col-md-2">
<img v-if="movie['poster']=='True'" :src="getImgUrl(movie['movieId'])" v-bind:alt="pic">
And here's the getImgUrl function:
getImgUrl(imgName) {
var images = require.context('../assets/posters', false, /\.jpg$/)
return images('./' + imgName + ".jpg")
}
While using vue/cli, I received webpack performance recommendations suggesting ways to optimize bundle size. However, I'm unsure how to proceed with implementing lazy loading or if hosting the images on a public Google Drive would resolve the issue.
As someone new to vue, any guidance or assistance would be greatly appreciated!