NFT SVG Image on Mobile MM Not showing

Developer Discussion
1

I am trying to use a svg encoded in the json, and the json is encoded too.
I am doing this:
_setTokenURI(newItemId, "data:application/json;base64,ewogICAgIm5hbWUiOiAiRXBpY0xvcmRIYW1idXJnZXIiLAogICAgImRlc2NyaXB0aW9uIjogIkFuIE5GVCBmcm9tIHRoZSBoaWdobHkgYWNjbGFpbWVkIHNxdWFyZSBjb2xsZWN0aW9uIiwKICAgICJpbWFnZSI6ICJkYXRhOmltYWdlL3N2Zyt4bWw7YmFzZTY0LFBITjJaeUI0Yld4dWN6MGlhSFIwY0RvdkwzZDNkeTUzTXk1dmNtY3ZNakF3TUM5emRtY2lJSEJ5WlhObGNuWmxRWE53WldOMFVtRjBhVzg5SW5oTmFXNVpUV2x1SUcxbFpYUWlJSFpwWlhkQ2IzZzlJakFnTUNBek5UQWdNelV3SWo0TkNpQWdJQ0E4YzNSNWJHVStMbUpoYzJVZ2V5Qm1hV3hzT2lCM2FHbDBaVHNnWm05dWRDMW1ZVzFwYkhrNklITmxjbWxtT3lCbWIyNTBMWE5wZW1VNklERTBjSGc3SUgwOEwzTjBlV3hsUGcwS0lDQWdJRHh5WldOMElIZHBaSFJvUFNJeE1EQWxJaUJvWldsbmFIUTlJakV3TUNVaUlHWnBiR3c5SW1Kc1lXTnJJaUF2UGcwS0lDQWdJRHgwWlhoMElIZzlJalV3SlNJZ2VUMGlOVEFsSWlCamJHRnpjejBpWW1GelpTSWdaRzl0YVc1aGJuUXRZbUZ6Wld4cGJtVTlJbTFwWkdSc1pTSWdkR1Y0ZEMxaGJtTm9iM0k5SW0xcFpHUnNaU0krUlhCcFkweHZjbVJJWVcxaWRYSm5aWEk4TDNSbGVIUStEUW84TDNOMlp6ND0iCn0");

if you copy and paste this string (without quotation marks) in the browser you can see the JSON, which is like this:

{
    "name": "EpicLordHamburger",
    "description": "An NFT from the highly acclaimed square collection",
    "image": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWluIG1lZXQiIHZpZXdCb3g9IjAgMCAzNTAgMzUwIj4NCiAgICA8c3R5bGU+LmJhc2UgeyBmaWxsOiB3aGl0ZTsgZm9udC1mYW1pbHk6IHNlcmlmOyBmb250LXNpemU6IDE0cHg7IH08L3N0eWxlPg0KICAgIDxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9ImJsYWNrIiAvPg0KICAgIDx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBjbGFzcz0iYmFzZSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+RXBpY0xvcmRIYW1idXJnZXI8L3RleHQ+DQo8L3N2Zz4="
}

if you copy the image string value (without quotation marks) in the browser you can see the SVG Image.

this works in order to see the NFT on OpenSea and Rarible, but still not showing in MetaMask, is there a reason for this? please answer guys

thanks in advance

1 Like
2

I am developing on Cronos Testnet, I don’t know if this could help you.

1 Like
3

Hi! In addition to waiting for community member responses, you can also start a live chat on the MetaMask site here :

you can contact our support team at https://metamask.zendesk.com/hc/en-us and click Start a conversation

Once you click Start a conversation a live chat bot will appear on your screen. It will give you an automated response at first, but afterwards you should be able to contact the support team directly and submit a ticket.

1 Like
4

Hey @FinalBoss95, have you tried another image file like JPEG or PNG? Does it work using those files?

2 Likes
5

I tried and it worked! thank you so much!!!
BTW it’s weird because lots of tutorials show how to randomly generate NFTs using the SVG format in Solidity.
I mean it’s ok to have the metadata and use them, but I think it would be good if MetaMask Mobile App could use them too in order to show the onChain image!
Or maybe I should automate in someway the conversion, or prepare all the NFT Images before :face_with_monocle:

3 Likes
6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.