This discussion has been migrated from our Github Discussion #6647
I want to use SVG image for background on my website. I use Cloudinary as a provider for media library. After uploading, setting media in content, and using GraphQL query:
{
pages {
bg {
url
}
}
}
I get full raw url of that file like this:
https://res.cloudinary.com/dyry2to5c/raw/upload/v1591948235/media_Design_bg_76fe252a25
It is returned as raw file without extension. When opening this url in browser the file is downloaded. But it is not working as a background in css.
So the question is, how to get an image with extension?
Responses to the discussion on Github
When uploading svg there was also the problem of not uploading the image thumbnail.
https://react-api-raphaelfreire.herokuapp.com/landing-page
Collaborator
Hi @RaphaelFreire we are currently looking into this internally and once we have an answer we will let you know.
Hello! I just tried myself and everything is working fine on my side.
Here is a video record of my test -
Let me know if I’m missing something
Author
Hi, thanks for testing. Yes, JPEG works, but not SVG
Hi, @seleckis I add <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130 128"> in my svg and works.
Author
And fetching it with graphql you receive url with extension .svg?
Yes!
https://react-api-raphaelfreire.herokuapp.com/landing-page
“url”: “https://res.cloudinary.com/drgnqntag/image/upload/v1598491850/react_791425b954_76e5e45bc0.svg”,
I have the same problem as @seleckis!
no .svg extension
File in strapi
File in Cloudinary
Found the solution!
Need to put <?xml version="1.0" encoding="utf-8"?> before the <svg> tag.
Thanks
Where should we add this line exactly?
Where should we add this line exactly?
At the top of the file, above the <svg> tag!
