next-optimized-images
next-optimized-images copied to clipboard
[canary] Type 'ImgSrc' is not assignable to type 'string'.ts(2322)
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?
I was going to open an issue about it too. I had the exact same problem here, but instead with the Img
component.
@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.
There's an issue with typescript and the Img src prop.
I figured this out. I forgot to require
the image src. Using require(ImgSrc)
fixes the types issue.
I figured this out. I forgot to
require
the image src. Usingrequire(ImgSrc)
fixes the types issue.
Explain how you did it?
I did with
<img src={URL.createObjectURL(file?.[0])} alt="" className={styles.img} />
I figured this out. I forgot to
require
the image src. Usingrequire(ImgSrc)
fixes the types issue.
Hi! How did you do that? Showing your code will be helpful
{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?
require(ImgSrc)
How did you do this? Because I have the same problem
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
Did you figure why it works?
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 💀