Nuxt•3w ago

NuxtImg from assets folder

Hey everyone! I recently made two changes to my Nuxt 3 project: - Switched from @nuxt/image-edge to @nuxt/image - Moved from Webpack to Vite Before switching to Vite and @nuxt/image, I had the following configuration in nuxt.config.ts, and everything was working fine:

 build: {
    extend(config: any) {
      config.output.publicPath = ${cdnUrl}xonuxt/_nuxt/;
    },
  },

  builder: "webpack",
  modules: ['@nuxt/image-edge'],
  image: {
    domains: [${cdnMinUrl}],
    provider: "ipx",
    ipx: {
      baseURL: ${baseUrl}_ipx,
    },
  },

 build: {
    extend(config: any) {
      config.output.publicPath = ${cdnUrl}xonuxt/_nuxt/;
    },
  },

  builder: "webpack",
  modules: ['@nuxt/image-edge'],
  image: {
    domains: [${cdnMinUrl}],
    provider: "ipx",
    ipx: {
      baseURL: ${baseUrl}_ipx,
    },
  },

After the changes, my new nuxt.config.ts looks like this:

  modules: ['@nuxt/image'],
  image: {
    provider: "ipx",
    domains: [cdnMinUrl],
    ipx: {
      baseURL: `${baseUrl}_ipx`,
    },
  },
  vite: {
    base: `${cdnUrl}xonuxt/_nuxt/`,
  },

  modules: ['@nuxt/image'],
  image: {
    provider: "ipx",
    domains: [cdnMinUrl],
    ipx: {
      baseURL: `${baseUrl}_ipx`,
    },
  },
  vite: {
    base: `${cdnUrl}xonuxt/_nuxt/`,
  },

However, after switching to Vite and @nuxt/image, my images are not loading properly. I’m not sure if I need to configure @nuxt/image differently or if there's a conflict with Vite’s handling of base. Has anyone faced a similar issue or knows what changes I should make to my nuxt.config.ts to make it work with Vite?

9 Replies

kapa.ai•3w ago

Hi @konsav. 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, I can offer some insights and suggestions regarding your issue with NuxtImg and assets in Nuxt 3 after switching to Vite and @nuxt/image. 1. Image Source Directory: By default, Nuxt Image looks for images in the public/ directory. If you're storing your images in the assets/ folder, you need to specify this in your configuration. Add the following to your nuxt.config.ts:

   export default defineNuxtConfig({
     image: {
       dir: 'assets/images'  // Adjust this path to match your asset structure
     }
   })

   export default defineNuxtConfig({
     image: {
       dir: 'assets/images'  // Adjust this path to match your asset structure
     }
   })

This is mentioned in the Nuxt Image Configuration documentation. 2. Vite Configuration: When using Vite with Nuxt, you might need to adjust some configurations. Make sure you have the Vite integration enabled in your nuxt.config.ts:

   export default defineNuxtConfig({
     bridge: {
       vite: true,
       nitro: true
     }
   })

   export default defineNuxtConfig({
     bridge: {
       vite: true,
       nitro: true
     }
   })

This is based on the Nuxt Bridge Vite documentation. 3. Image Provider: You're using the ipx provider, which is the default for Nuxt Image. Make sure your baseURL is correctly set and accessible. 4. Dynamic Imports: If you're dynamically importing images from the assets folder, there might be issues with Vite's handling. You may need to use the ?url suffix when importing, as mentioned in a Stack Overflow post:

   const contactAvatar = await import('~/assets/img/contact/1.jpg?url');
   contactAvatarUrl.value = contactAvatar.default;

   const contactAvatar = await import('~/assets/img/contact/1.jpg?url');
   contactAvatarUrl.value = contactAvatar.default;

5. Static Generation: If you're using nuxt generate for static site generation, make sure your images are being properly pre-rendered. You might need to add routes to the nitro.prerender.routes option in your nuxt.config.ts as described in the Nuxt Image Static Images documentation. 6. Sharp Installation: Ensure that the sharp package is correctly installed and built for your production environment. If you're deploying to a Linux server, you might need to rebuild sharp with the correct architecture:

   npm rebuild --arch=x64 --platform=linux --libc=musl sharp

   npm rebuild --arch=x64 --platform=linux --libc=musl sharp

This solution was mentioned in a Stack Overflow post. Given the complexity of your setup with CDN URLs and custom configurations, it's possible that there might be interactions between these settings that are causing issues. You might need to review how your CDN URLs are being used in conjunction with the new Vite and @nuxt/image setup. If these suggestions don't resolve your issue, you may need to provide more specific error messages or behavior you're seeing for further troubleshooting. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

konsavOP•3w ago

I add this

   export default defineNuxtConfig({
     image: {
       dir: 'assets/images'  // Adjust this path to match your asset structure
     }
   })

   export default defineNuxtConfig({
     image: {
       dir: 'assets/images'  // Adjust this path to match your asset structure
     }
   })

but i have the same issue. @kapa.ai

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: Sorry @konsav, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

konsavOP•2w ago

@kapa.ai

kapa.ai•2w ago

Kal•2w ago

I would first scrutinize the Vite base URL aspect. Maybe you need this, maybe not, but that's one possible fault point. Anyways, as a reference below is my working Nuxt3+NuxtImage code, even though slightly different than yours. For Vite, I didn't specify a baseURL. nuxt.config.ts

//...
modules: ['@nuxt/image'],
//...
    image: {
        domains: [process.env.WEBSITEBASEURL],
        imgix: {
            baseURL: process.env.IMAGEBASEURL
        }
    }
//...

Any Vue component

<NuxtImg provider="imgix" :src="'/public/marketing/someMarketingImage123.jpg'"
fit="cover" :modifiers="{ auto: 'format,compress' }" />

Side note: imgix is friggin awesome.

konsavOP•6d ago

@Kal thank you for your response. I use the Vite base because I have the same configuration previously. Concerning your advice, I have the images inside assets folder and not in public folder. This code now run on dev but not when i am running production. Its appear src="data:image/jpeg;base64,/9j/4AAQSkZ... modules: ['@nuxt/image'], image: { provider: "ipx", domains: [cdnMinUrl], ipx: { baseURL: ${baseUrl}_ipx, }, dir: "assets/img" }, vite: { base: ${cdnUrl}xonuxt/_nuxt/, },

Kal•6d ago

That's interesting about dev vs prod and is another hint this issue related to baseUrl being a problem. For any IT project, when going from dev to prod, base path issues are very common; I've encountered it many times. To re-iterate, for my own app I don't specify any vite baseUrl and it's deployed to Heroku without issues. I can imagine that maybe in another deployment context may require baseUrl (especially if there's multiple apps) where the app may not occur in root, but in a sub-folder. In any case, on a side note, it's strange that you have "_nuxt" hardcoded; this is not an advisable practice as anything that starts with underscore is usually volatile. What is the reason for that? I then ask, why is the project so special to warrant strange things? I have no answers for you, just food-for-thought to chew on. Re: The img src url "/public/" folder, is actually not Nuxt at all but occurs remotely on the imgix instance. My baseURL: process.env.IMAGEBASEURL is an external url (imgix, where my images are hosted).

Gaming

Programming

NuxtImg from assets folder

Did you find this page helpful?