0

I have a React app with Next.js where I import an image using:

import image1 from '../../../img/dummy-image-2.jpg';

Later on I use:

<img src={image1} alt="Dummy" />

The app builds and runs as expected (the image is shown) but I'm getting a linter error on the src attribute in the <img> tag that reads:

Type 'StaticImageData' is not assignable to type 'string'.

How can I get rid of this error?

alexortizl
  • 2,125
  • 1
  • 12
  • 27
  • 1
    Does this answer your question? [Background Div Images not displaying when setting them via Inline Styles Dynamically | Next.Js](https://stackoverflow.com/a/68517270/11613622) -- refer the second section of the answer. Basically do `src={image1.src}` – brc-dd Aug 16 '21 at 18:20
  • @brc-dd unfortunately it doesn't. I don't have images in the `/public` folder. Also when I import my images they are imported as a `string` and that's the problem, I'm importing a `string` but the TypeScript linter believes that I'm importing a `StaticImageData`. `src={image1.src}` renders nothing however `src={image1}` does renders the image. – alexortizl Aug 16 '21 at 19:47
  • 1
    Okay, so you have a custom webpack config (or are using some plugin) where you have configured a loader for the images. In that case you need to [disable the static image optimization in next.config.js](https://nextjs.org/docs/basic-features/image-optimization#disable-static-imports). It'll prevent Next.js from adding a reference to `next/image-types/global` in `next-env.d.ts`. – brc-dd Aug 17 '21 at 03:36

1 Answers1

0

Create a file named assets.d.ts, if you don't already have a .d.ts file in you project and put the following:

declare module '*.jpg' {
  const content: any; // you can also set this to string
  export default content;
}

See this link if you want to know more about .d.ts files

Hozeis
  • 1,542
  • 15
  • 36