Nuxt•4w ago

NuxtImage: Relative import

Hey 👋 I am currently working on a website that will be deployed on a server subdirectory (like domain/directory). My goal is to build the app using relative path, so I can change the directory later without rebuilding the app ( I guess baseURL does not work for that). I manage to make the import for /_nuxt/ working using cdnURL: './', but for some reason, public images used by <NuxtImage> and the provider ipx does not follow this rule Is there a way to prepend ./ to the /_ipx/ path ? Something like this

image: {
    ipx: {
      cdnURL: "./",
    },
  },

image: {
    ipx: {
      cdnURL: "./",
    },
  },

3 Replies

kapa.ai•4w ago

Hi @Lyliya. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To address your question about using relative paths with NuxtImage for a website deployed in a subdirectory, there are a few important points to consider based on the provided knowledge sources: 1. The default behavior of Nuxt Image is to look for images in the public/ directory. However, when using a subdirectory deployment, this can cause issues with path resolution. 2. The cdnURL option you mentioned is not directly applicable to the ipx provider. Instead, we need to focus on the dir option for the image module configuration. 3. To solve your issue, you can try the following configuration in your nuxt.config.ts file:

export default defineNuxtConfig({
  image: {
    dir: 'assets/img'
  },
})

export default defineNuxtConfig({
  image: {
    dir: 'assets/img'
  },
})

This configuration tells Nuxt Image to look for images in the assets/img directory instead of the default public directory. This approach is recommended by the Nuxt Image documentation. 4. After making this change, you should be able to use relative paths in your <NuxtImg> components like this:

<NuxtImg src="/my-image.jpg" />

<NuxtImg src="/my-image.jpg" />

The image should now be correctly resolved relative to your project's root, regardless of the subdirectory it's deployed in. 5. It's important to note that for some providers (like Vercel), using a directory other than public/ for assets is not supported since resizing happens at runtime. However, this shouldn't be an issue if you're using the default ipx provider. 6. If you're still experiencing issues, you might want to consider creating a custom provider as described in the Nuxt Image documentation on custom providers. This would allow you to have more control over how the image URLs are generated. Remember that these suggestions are based on the current Nuxt Image documentation and may not cover all edge cases. If you continue to face issues, you might want to open an issue on the Nuxt Image GitHub repository for more specific assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

LyliyaOP•4w ago

You did great AI, but I already tried and this does not work 😭 Currently I am using a custom provider like this, but it feel weird, I wonder if there is a better solution

export const getImage: ProviderGetImage = (
  src,
  { modifiers = {}, baseURL } = {}
) => {
  if (!baseURL) {
    // also support runtime config
    baseURL = useRuntimeConfig().public.siteUrl;
  }

  const operations = operationsGenerator(modifiers);

  return {
    url: joinURL("./", baseURL, src + (operations ? "?" + operations : "")),
  };
};

export const getImage: ProviderGetImage = (
  src,
  { modifiers = {}, baseURL } = {}
) => {
  if (!baseURL) {
    // also support runtime config
    baseURL = useRuntimeConfig().public.siteUrl;
  }

  const operations = operationsGenerator(modifiers);

  return {
    url: joinURL("./", baseURL, src + (operations ? "?" + operations : "")),
  };
};

Gaming

Programming

NuxtImage: Relative import

Did you find this page helpful?