SVG Experts - Why won't this SVG code work in an Image column?

[WillowMobileSys]

I have been playing with trying to use SVG code to animate images in AppSheet. I can animate a shape in AppSheet and I have been able to animate an Image (using SVG) on an HTML web page.

However, when I try to animate an image in AppSheet I run into issues. I have narrowed code down to simply show a static Image within the SVG code. Similar code to the below does show an image on a web page.

Does anyone know what I need to change in the SVG code below in order to get the image to display? OR if it just isn’t possible this way?

---

Code attempting to display an Image directly from Google Drive in an AppSheet column

"data:image/svg+xml;utf8, <svg xmlns=""http://www.w3.org/2000/svg"">
  <image xlink:href=""https://drive.google.com/uc?export=view&id=1gxvUziCU3zqYpi2B3IiS4OZqcoPp8-NK"" width=""50%"" height=""50%""/>
</svg>"

[Jonathon]

I haven’t had much luck with including external images in SVG code with appsheet. Like you, whenever I have tried, it hasn’t worked.

[MultiTech]

WillowMobileSystems:

“https://drive.google.com/uc?export=view&id=1gxvUziCU3zqYpi2B3IiS4OZqcoPp8-NK”

This isn’t the actual link to the image, it’s a link to a webpage displaying the image. It’s how google get’s around hotlinking of images; a few years ago they made efforts to put a stop to people using G-drive as an image hosting service.

I’ve been trying to find a work around… none found so far.

---

What happens if you insert a static image url instead? Does the image display?

[WillowMobileSys]

So the link came from AppSheet documentation on displaying images in Google.

I can get this image to display on a web page – and even apply SVG animation. Not that it means anything.

Excuse my lack of knowledge, but how would one get a “static image url” for an image stored on G-drive?

[MultiTech]

That’s one of the things I’ve been trying to find a good work around for.

Unless the image is a part of something in your app, I don’t think you can pull the image using the following:

Take image from image column and display as link

=CONCATENATE(“https://www.appsheet.com/template/gettablefileurl?appName=”, ENCODEURL(" Inventory-114348 “), “&tableName=”, ENCODEURL(” Orders "), “&fileName=”, ENCODEURL(+ B2 )))

I think the image actually has to be uploaded as apart of some record or something.

[jdtyler-dev]

The best way ive found is

• A.  make a quick table for uploading images to using including.
•  [id]:text:key:uniqueid(packeduuid),
• [name]:name:label,            v [file]:file, [image]:image:label,  [link]:show:url
• // then any other metadata columns to fit your use case
• B. Create the app from your gsheet
• C. Using form add a name and then use the file upload feature to upload a file/image/pdf whatever you want from your device/local storage and then once its uploaded you should be able to click to view the image.
• D. Now in the address bar copy and paste the current url into your spreadsheet in the url column
• Dont use the google drive link use the link generated by appsheet it will start like this 
• https://lh3.googleusercontent.com\
• Now got back to your app and select the image you uploaded and in the details area you should have a compatible link you can use to replace google maps backgrounds or animations to use in other apps and use the app like a image link generator and asset library.
• If used with bit.ly u can also customize the long urls using your domain and shorten the otherwise long url for convenience. 

[jdtyler-dev]