QraphQL ImageInput help

Highlighted
Shopify Partner
23 0 0

Hi All,       

          Is there a way to set the "src" attribute of ImageInput in GraphQL to base64 data urlor a generated url using window.URL.createObjectURL(imageFile)). I tried it but no way! I would highly appreciate your help.

 

Kind Regards,

Mazen

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
1041 140 167

Hey @MazenMustafa,

 

The API will only provide an image URL, but you might be able to find a JS library to convert the URL to base64.

Notice; Out of office, replies will be delayed until my return. Thanks!
0 Likes
Shopify Partner
23 0 0

Hi @SBD_ , Thanks for your reply, I appreciate it. Yes, I found a JS library to covert into base64. However when I place it in the "src" property, it does not work! So, would you please make sure if the "src" property accepts base64?

0 Likes
Highlighted
Shopify Staff
Shopify Staff
1041 140 167

This is a browser/HTML thing. This thread might help you troubleshoot: https://stackoverflow.com/questions/8499633/how-to-display-base64-images-in-html

Can you provide an example of it not working? Let me know if I'm missing something.

Notice; Out of office, replies will be delayed until my return. Thanks!
0 Likes
Highlighted
Shopify Partner
23 0 0

@SBD_  I appreciate your help. I tried it again but it's not working when placing base64 image into the src property of ImageInput, attached the debugger details for the example I tested, If I place a url , it works. base64ImageIssue.JPG

 

This is the example source code:

                <PageActions
                  primaryAction={[
                    {
                      content: 'Save',
                      onAction: () => {
                        // console.log(files)
                        const productInput = {
                            title: title,
                            images: files.map( (file, index) => (
                              {
                                altText: file.name,
                                src: image  //State Variable 
                              }
                              )),
                            bodyHtml: bodyHtml,
                          };
                          console.log(productInput);
                          handleSubmit({
                              variables: { input: productInput },
                        });
                      }
                    }
                  ]}
                />
0 Likes
Highlighted
Shopify Staff
Shopify Staff
1041 140 167

Hey @MazenMustafa,

 

Apologies, I misunderstood your goal. You'll need to provide a URL to the imageInput  (more info).

Notice; Out of office, replies will be delayed until my return. Thanks!
1 Like