How to display a svg image (hosted on cloudinary) with Next.js Image tag?

Question

I am building a project with Next.js and Strapi as CMS, the images are hosted on Cloudinary.

My problem is that the SVG image doesn't display using Image tag from Next.js.

I already read this topic Can't import SVG into Next.js but it's for locally stored images and doesn't seem to work for remote hosted SVG images.

Could you provide a [mre]? – juliomalves Jan 05 '22 at 16:01 — juliomalves, Jan 05 '22 at 16:01

score 0 · Accepted Answer · answered Jan 05 '22 at 17:15

0

My build is in Gatsby with Forestry.io as CMS and images hosted on cloudinary, but but my issue was solved by adding the fl_sanitize flag mentioned in this article from cloudinary support.

answered Jan 05 '22 at 17:15

Jess Rezac

16

score 0 · Answer 2 · answered Jan 05 '23 at 14:49

I know this is a bit old but stumbled across this post

I put out a Cloudinary integration for Next.js that wraps the Image component and you're able to handle this nicely

Next Cloudinary: https://next-cloudinary.spacejelly.dev/

Given an asset cloudinary-logo-blue that's uploaded as an SVG:

<CldImage
  width="500"
  height="96"
  src="cloudinary-logo-blue"
  format="svg"
/>

Hope this helps!

How to display a svg image (hosted on cloudinary) with Next.js Image tag?

2 Answers2