CODEWITHSUNDEEP
reactjsnext.js
Hughes
Hughes

Reputation: 414

Getting public image asset in Next.js project folder when loader configuration path is set

Context

I have started a Next.js project that needs to get image assets from two different sources:

  1. In the local public folder of the repository: <Image src="/logo.png" width={50} height={50} alt='Logo' layout="fixed"/>
  2. Assets from a cloud provider (Cloudinary): <Image src="<transformations>/<version>/<public_id>.jpg" width={400} height={400} alt='Planning garden image'/>

The Problem

When setting the images path in the next.config.js file, images meant to load from the public file now point to Cloudinary.

The image loader path is set in the Next.js configuration file:

// next.config.js

module.exports = {
  images: {
    loader: 'cloudinary',
    path: 'https://res.cloudinary.com/<cloud_name>/image/upload',
  },
}

This means that the 1. above also uses relative URLs for the Image src and prepends it with the path in the config folder. This is incorrect for images stored in the public folder - which would be the default path if the configuration for Cloudinary were not set.

Can I have image paths coming from different sources depending on the context in which I'm using them. I don't want to put all the images on Cloudinary. I want 1 to still come from the public folder.

Upvotes: 1

Views: 2746

Answers (1)

Hughes
Hughes

Reputation: 414

The key bit of information is: "Loaders can be defined per-image, or at the application level."

When the loader configuration is set at the application level so that cloud-based image optimisation can be used, to get local images working override their loader configuration.

As Jerry showed how to do in the comment: <Image loader={({src})=> src} src="/logo.png" layout="fill" />

Upvotes: 5

Related Questions