I am currently working on developing a rather large app. Everything was running smoothly in the development environment without any errors. However, upon switching to the production environment, I started encountering numerous errors. Nuxt seems to be having trouble loading some of the images. The images are stored under assets/**/*.
Here is an example of how images are imported:
<img :src="require(~/assets/establishment_img/${image})" alt="preview image">
These are the errors: https://i.sstatic.net/SHbTB.png
nuxt-config.js
const path = require("path")
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: "Estudiant Orientation",
htmlAttrs: {
lang: "en"
},
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ hid: "description", name: "description", content: "" }
],
link: [
{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
{
rel: "stylesheet",
type: "text/css",
href:
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
}, // font-awesome css
...
],
script: [
{
hid: "stripe",
src:
"https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.15/swiper-bundle.min.js",
defer: true
}, // swiper js
...
},
...
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
...
],
...
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {}
};
Additionally, this is what I have in my index.js for the server side:
// Handling Production
if (process.env.NODE_ENV === 'production') {
// Static Folder
app.use(express.static(__dirname + '/public/'));
// Handle SPA
app.get(/.*/, (req, res) => res.send(__dirname + '/public/index.html'));
}
Any suggestions on how to resolve this issue?