[canary] Type 'ImgSrc' is not assignable to type 'string'.ts(2322)

[JannikZed]

I was trying to use the canary version with an SVG image and typescript. Getting the following error:

Type 'ImgSrc' is not assignable to type 'string'.ts(2322)
Svg.d.ts(3, 5): The expected type comes from property 'src' which is declared here on type 'IntrinsicAttributes & SvgProps'

The code looks like this:

import { Svg } from 'react-optimized-image';
import Arrow from './arrow-forward-outline.svg';

<Svg src={Arrow} className="arrowforward" />

Seems like the typing is wrong somehow?

[LucasMallmann]

I was going to open an issue about it too. I had the exact same problem here, but instead with the Img component.

[cyrilwanner]

@JannikZed there was indeed a wrong typing in the Svg component, thank you very much for reporting it! The version 3.0.0-canary.8 should fix this problem.

@LucasMallmann The typing of the Img component should be correct. Did you add /// <reference types="optimized-images-loader" /> to your next-env.d.ts file? Or do you have any custom typings for image files (maybe from version 2)? If so, you can remove them to use the ones shipped by next-optimized-images.

[arnonate]

There's an issue with typescript and the Img src prop.

[arnonate]

I figured this out. I forgot to require the image src. Using require(ImgSrc) fixes the types issue.

[ilyariver]

I figured this out. I forgot to require the image src. Using require(ImgSrc) fixes the types issue.

Explain how you did it?

[mjahmed-wd]

I did with

<img src={URL.createObjectURL(file?.[0])} alt="" className={styles.img} />

[RuwaidMuntajim]

I figured this out. I forgot to require the image src. Using require(ImgSrc) fixes the types issue.

Hi! How did you do that?
Showing your code will be helpful

[AxelReid]

{URL.createObjectURL(file?.[0])}

Isn't it a bad way to do this. I seem to have heard that we should revokeObjectURL after createObjectURL otherwise there'll be memory leak. Am i right?

[mrparkersson]

require(ImgSrc)

How did you do this? Because I have the same problem

[pedrojobs13]

I Just update my code from

import imageX from './assets/image.jpg'
<img src={imageX />

to

import imageX from './assets/image.jpg';
<img src={imageX.src} />

this working for me

[netsamma]

Did you figure why it works?

[IntiSilva]

I Just update my code from

import imageX from './assets/image.jpg'
<img src={imageX />

to

import imageX from './assets/image.jpg';
<img src={imageX.src} />

this working for me

Yo typescript is weird af 💀