Nuxt•4w ago

Files not served from public directory

I have a couple of images in the public folder but they are not served in the production build

5 Replies

Hi @Teian. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, there could be a few reasons why your images in the public folder are not being served in the production build. Let's explore some possible causes and solutions: 1. File Naming Convention: Make sure your image files don't start with a hyphen (-). As mentioned in the Nuxt Configuration documentation, by default, Nuxt ignores files in the public directory that start with a hyphen. 2. Correct Path Usage: Ensure you're using the correct path to reference your images. For files in the public directory, you should use the root URL. For example, if your image is in public/images/my-image.jpg, you would reference it as /images/my-image.jpg in your code. 3. Build Process: There's a possibility that the build process is not including your public files correctly. You can try to manually add your image routes to the nitro.prerender.routes option in your nuxt.config.js file, as suggested in the Nuxt Image documentation:

export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: [
        '/images/my-image.jpg',
        // Add other image paths here
      ]
    }
  }
})

export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: [
        '/images/my-image.jpg',
        // Add other image paths here
      ]
    }
  }
})

4. File System Discrepancy: As mentioned in a GitHub issue, there might be a discrepancy between the actual files in the public directory and what Nuxt recognizes. This is because Nuxt hardcodes the list of files it will support reading for performance reasons. If you've added new files after the initial build, they might not be recognized. 5. Deployment Process: Ensure that your public directory is being correctly deployed to your production environment. Some hosting platforms might have specific requirements for serving static assets. If none of these solutions work, you might need to investigate further by checking your server logs or using browser developer tools to see if there are any specific error messages related to the image requests. Remember, without more specific details about your setup and the exact error you're encountering, it's challenging to pinpoint the exact cause. If the problem persists, you might want to create a minimal reproducible example and seek help on the Nuxt GitHub repository or community forums. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@124210200021303296> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

TeianOP•4w ago

hi, I'm deploying via docker. I've checked that the files are present in the docker image, which they are but when I try to load the files with a url like something.com/images/my-image.svg where the files is placed in public/images/my-image.svg i get a 404 not found Docker buildfile looks like this

# syntax=docker/dockerfile:1.4

ARG NODE_VERSION=22

FROM node:${NODE_VERSION}-alpine AS base

ENV NODE_ENV=production
ENV PORT=3000

# Build
FROM node:${NODE_VERSION} AS build

WORKDIR /src

COPY --link frontend/ .

RUN npm install
RUN npm run build

# Run
FROM base AS final

WORKDIR /app

COPY --from=build /src/.output .output

CMD [ "node", ".output/server/index.mjs" ]

# syntax=docker/dockerfile:1.4

ARG NODE_VERSION=22

FROM node:${NODE_VERSION}-alpine AS base

ENV NODE_ENV=production
ENV PORT=3000

# Build
FROM node:${NODE_VERSION} AS build

WORKDIR /src

COPY --link frontend/ .

RUN npm install
RUN npm run build

# Run
FROM base AS final

WORKDIR /app

COPY --from=build /src/.output .output

CMD [ "node", ".output/server/index.mjs" ]

did maybe something change between nuxt 3.12 and 3.15 which I overlooked? @L422Y does this information help I've found nothing helpful in the documentation to resolve this problem As I mentioned the files are present in the final container therefore I doubt the copy stuff

TeianOP•4w ago

does it maybe have to do something with https://nuxt.com/docs/getting-started/upgrade#new-directory-structure those changes?

Nuxt

Upgrade Guide · Get Started with Nuxt

Learn how to upgrade to the latest Nuxt version.

TeianOP•4w ago

holy ... I'm soooo stupid and so sorry to have bothered you there was a wrong nginx proxy setting @l422y thanks for responding though I guess this can be closed

Gaming

Programming

Files not served from public directory

Did you find this page helpful?