Type error: Property 'url' does not exist on type '{ responsiveImage: ResponsiveImageType; }'

🆘 Support
1

Title says it all really - I’m having issues with compilation as Typescript says ‘url’ isn’t a property of responsiveImage, even though it works as intended:

Failed to compile.

./components/CV/Components/Company.tsx:20:38
Type error: Property 'url' does not exist on type '{ responsiveImage: ResponsiveImageType; }'.

  18 |             skill => (
  19 |               <div className={Styles.icon} key={skill.id}>
> 20 |                 <img src={skill.icon.url} alt={skill.name} title={skill.name} />
     |                                      ^
  21 |               </div>
  22 |             )
  23 |           )}
info  - Checking validity of types .The terminal process "/bin/zsh '-c', 'npm run build'" terminated with exit code: 1.

The responsiveImage is ‘icon’. I’m using ‘url’ property as these images are SVGs and couldn’t seem to get them working otherwise.

I realise I can get Typescript to ignore the issue, but wanted to learn of any better way to use an SVG without losing type safety.

Thanks

2

Hey! Our responsiveImage GraphQL query does not return an url property:

Screenshot 2021-07-20 at 10.32.40
Screenshot 2021-07-20 at 10.32.401048×1210 56.2 KB

Screenshot 2021-07-20 at 10.33.09
Screenshot 2021-07-20 at 10.33.092878×826 338 KB

SVG images are special as in they don’t return any information for the responsiveImage query, as they’re vectorized and it doesn’t make much sense to offer ie. a base64. As a direct consequence, our react <Image /> component does not support SVGs either.

Having that said, it would really help to see the GraphQL query you’re performing and the code of your component and top-level page to understand something more about your error.

1 Like