#Images do not load in production

14 messages · Page 1 of 1 (latest)

honest seal
#

Do you statically host/generate that site or do you have the Nuxt server running?

worldly crane
honest seal
worldly crane
# honest seal and how does you nuxt config look like? 
export default defineNuxtConfig({
    devtools: { enabled: true },

    runtimeConfig: {
        authSecret: process.env.AUTH_SECRET,
        public: {
            linkedin: process.env.LINKEDIN,
            instagram: process.env.INSTAGRAM,
            facebook: process.env.FACEBOOK,
        }
    },
    alias: {
        assets: "/<rootDir>/public/assets",
        uploads: "/<rootDir>/uploads"
    },
    sourcemap: {
        server: true,
        client: true
    },
    debug: true,
    colorMode: {
        preference: 'light'
    },

    modules: [
        "nuxt-server-utils",
        "@sidebase/nuxt-auth",
        "nuxt-headlessui",
        '@nuxtjs/i18n',
        '@nuxt/ui',
        'nuxt-aos',
        '@nuxtjs/google-fonts',
        '@nuxt/image',
        "nuxt-security"
    ],
    googleFonts: {
        families: {
            'Montserrat': [400, 500, 600, 700]
        }
    },
    nuxtServerUtils: {
        mongodbUri: process.env.MONGODB_URI,
    },
    security: {
        headers: {
            contentSecurityPolicy: false,
        },
    },
    auth: {
        baseURL: process.env.AUTH_ORIGIN,
        provider: {
            type: "authjs",
        },
        redirect: {
            login: "/auth/login",
            callback: "/auth/callback",
            home: "/",
        },
    },
    nitro: {
        esbuild: {
            options: {
                tsconfigRaw: {
                    compilerOptions: {
                        experimentalDecorators: true
                    }
                }
            }
        }
    },

});```
worldly crane
#

Hello @honest seal, Do you need any other configuration elements?

honest seal
#

Maybe package json would be nice

#

But that looks okay so far

#

Maybe try to create a small reproduction as suggested in #1222887703033679953

worldly crane
# honest seal Maybe package json would be nice 
{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@nuxt/image": "^1.5.0",
    "@nuxtjs/google-fonts": "^3.2.0",
    "@nuxtjs/i18n": "^8.2.0",
    "@nuxtjs/tailwindcss": "^6.8.0",
    "@sidebase/nuxt-auth": "^0.6.0-rc.0",
    "@types/bcrypt": "^5.0.1",
    "@types/formidable": "^3.4.5",
    "nuxt": "^3.7.4",
    "nuxt-aos": "^1.2.4",
    "nuxt-headlessui": "^1.1.5",
    "nuxt-security": "^2.0.0-beta.0",
    "vue": "^3.3.4",
    "vue-i18n": "^9.10.2",
    "vue-router": "^4.2.5"
  },
  "dependencies": {
    "@heroicons/vue": "^2.1.1",
    "@nuxt/ui": "^2.14.2",
    "bcrypt": "^5.1.1",
    "formidable": "^3.5.1",
    "jsonwebtoken": "^9.0.2",
    "mongoose": "^7.6.3",
    "next-auth": "4.21.1",
    "nuxt-server-utils": "^0.0.7"
  }
}
#

I've searched and I still can't find the problem...

honest seal
worldly crane
# honest seal a proper reproduction is the way to go then

What do you need that I didn't say? All my config files are here. I simply launched a project as shown in the documentation and put it into production. I see on the internet that the problem is recurrent but that there's no real solution to it. It only happens on images uploaded via form and not on static images.

#

Would you like me to redo it properly?

honest seal