Displaying an image in a front end

Xanoguy

I just posted this comment elsewhere (sorry!), but just now saw the "Noob" section, where it probably properly goes.

 I'm a beginner, and trying to display images in Weweb, using the Xano template backend (the one for photo sharing/liking). All of the "data display" elements in Weweb have trouble displaying the data that I pull from Xano into a Weweb "collection." Is there a simple example (maybe in psuedo code) you could show of best practices to display a single image in a front end, from a Xano databse?

Liz Anaya

Hi @Xanoguy! 👋

Here is a walkthrough on how you can display a single image in a front-end from a Xano database. Once you can retrieve the image URL from your Xano database, I suggest looking at the docs for the front-end platform of your choice to ensure you are importing the data correctly to the front end.

The first step I recommend is to check your database table where your images are stored and ensure they are stored correctly. You can check out the docs here if you need help uploading content to your database.

Here is an example of data (including images) that I imported from https://fakestoreapi.com/.

Next, I have an API endpoint that takes in a product id as input and responds with the product information. The response is the information you pass to your front end. In this example, I can find an image URL in the response and use that URL to display the image on the front end.

Let me know if this is helpful or if you have any additional questions! 😊

Xanoguy

Thanks a lot, but my problem comes as the next step, how to dynamically display the image in my front end.

I've created the API call in WeWeb that pulls the image URL. And as a placeholder I can manually hardcode (In Weweb) that URL as the source for an image on my page, but I don't see a way for the form that obtains the product (in your example) to then update the displayed image on the webpage with the new URL.

Thanks again. I know this is more of a front-end question, but it's got me stuck with my Xano-based app.

Liz Anaya

Ah, it does appear the challenge is on the front end. Have you checked out our YouTube channel? There are multiple tutorials on using Xano + WeWeb, including a WeWeb + Xano Full Tutorial. This might be helpful for figuring out how to dynamically display the image in my front end.

Xanoguy

Thanks lizanaya. I've watched the whole WeWeb + Xano Full Tutorial, which was helpful, but it uses some built-in "card" functionality on the front end that I couldn't seem to replicate with my simpler example. Thanks for your response, and I'll look more into your channel. Your documentation and tutorials are more extensive than WeWeb's, but both appear to be great products.

Liz Anaya

Glad to hear you've had a good experience with Xano so far! I'll keep an eye out for any other resources that might help with this, and please keep us posted if you find something that is useful.

quentindty

Hey @Xanoguy 👋

Quentin from WeWeb here!
Did you read our docs on data binding? https://docs.weweb.io/binding-filtering/binding-concept.html

Pretty sure you'll find the solution to your question here.

If not, could you please share a small video to show what you've done in your project? That'll definitely help.

Xanoguy

Thanks Quentin. I read the docs on binding and on images. I was able to get it working after a couple of days— my problems were 1) file resource / image functions, 2) receiving an image from 3rd party and needing to decode b64, 3) accessing the URL / image data within the objects. Lots of troubleshooting, but grateful for the help I received.

Liz Anaya

@quentindty Thank you for jumping in and providing the data binding resource! 🙌

Glad to hear that you were able to find a solution, @Xanoguy! Thank you for sharing the steps you took to get it working. Always good to hear how users reach a solution so we can understand how we can enhance our platform and assist users more effectively. 😊

quentindty

@Xanoguy to decode base64 strings, you can use a custom function in WeWeb using this JavaScript example:

var base64String = 'SGVsbG8gd29ybGQ='; // Base64-encoded string
// Decode the Base64 string

var buffer = Buffer.from(base64String, 'base64');

var decodedString = buffer.toString('utf8');
console.log(decodedString); // Output: "Hello world"

quentindty

I can also give you access to WeWeb copilot to generate this kind of functions for you, send me the email you used to signup at quentin@weweb.io and I'll give you access ;)