Default Image Source vs Dynamic Image Source

[armean]

Hi there,
(sorry in advance if I don’t explain myself properly, english is not my first language)

I’m kinda a newbie on Wappler, and I have this task now:

I want to show a default image (user avatar) if there’s a ‘null’ on a DBquery that I do, but if in the field of the table that I search in there’s content (url image) then I show that output from the server action.

I do understand that the dynamic attribute does this for me, but don’t really know how to formulate the if statement in there.

Thanks in advance!

[sitestreet]

Hi @armean. Welcome to the community

I think the formatter you want to use is ‘Default’ which is in the General section of App Connect. When you set the dynamic value, add the formatter and then enter the value you’d like it to use if there isn’t one pulled in from the database.

[armean]

Thanks for the answer!

I’ve just tried what you said but I’m not getting the dynamic value from just what you sent me, or do I?

[sitestreet]

Have a look in the browser console (right click the missing image and click ‘Inspect’) to see what is trying to be found. It’s most likely the path isn’t quite right. Could be as simple as removing the / from the beginning depending on server setup.

[ChristopheA]

Hey @armean, welcome!
Maybe this thread will help you: Show a default image if no image exists in the database - Wappler General / How To - Wappler Community

Also, what i’ve done in the past (not the best practice but still, it’s working ) is adding two images with a show/hide condition.

If this image existe, then show this block.
if this image doesn’t exist, then show this one.

[sitestreet]

@ChristopheA

adding two images with a show/hide condition

The issue with this is the page still tries to render the image but it’s not found so you get a 404 error for that image. No problem for the user because they won’t see it but the server will potentially put blocks in thinking it’s being bombarded by a bot.

[ChristopheA]

Yes, you’re totally right!
That’s why I mentioned that it’s not the best way but works…

[armean]

You are totally right.

The server action was outputing just the file name (“fav.png”)
But I was missing the reference to the route first “/assets/img/…”
In the src binding I was just putting the result of the value, so I always (whenever I have content) just got the output “fav.png”.

Don’t know if this is the best way to fix it but my solution was to create a variable and do the ‘condition format’ in there,
And then add the value to the src:/assets/img/…

So now it works!
Thank you again so much.

[armean]

Also thought about the hidding/showing fix but I also now that’s not the cleanest way to do it X)

Thanks anyway, I got it fixed.
And that topic you sent might be useful as well!

Regards!

[sitestreet]

I’m pleased you have it working. Re-looking at your earlier screenshot, there are no ’ ’ around the default text so that might be why it didn’t work initially.

[armean]

I think I shout victory too early!

Do you guys might have an idea that why when the default value gets trigger and being saved in the variable; after just a second it takes again the last value from the server action?

[sitestreet]

I wouldn’t use a separate variable. Work on the original solution to get the full path into the default value and you should be fine. See my earlier post about missing quote marks.

[Teodor]

Your code should look like:

dmx-bind:src="serverconnect.data.query.somevalue.default('/path/to/your/static_img.png')"

[armean]

Thank you both @sitestreet and @Teodor .

But there’s one issue that I have with that logic.
The server action only outputs the file name to save space in the database. (image.png)
I can put the path + file name in the data format.
But I’m still missing the path for the dynamic value.

I’ll need to speak about adding the path as well in the database.

[Teodor]

Well you can manually enter the path in the expression …

dmx-bind:src="'/static/path/here/' + serverconnect.data.query.somevalue.default('static_img.png')"

[armean]

I tried that solution as well but my syntax wasn’t the right one!

Thanks!
I think it works but something else on the page is breaking this.
Apparantly, when it should show the default it does for a sec and then gets the value ‘null’ from the server action. So then shows no picture.

[ChristopheA]

This solution is perfect! Thanks!

[armean]

Guys @Teodor , @sitestreet
sorry to bother again but still can’t find a fix to a little problem that I have.

So apparently, when I have to show the user’s avatar and there’s a custom picture that must be shown; it firstly shows the default picture because it’s getting a null from the server action due to server’s action late response.

The only thing that come to my mind is to use lazy loading but still not working.
Maybe you guys could illuminate me on this.

Thanks !

[sid]

@armean

it’s getting a null from the server action due to server’s action late response.

You can hide the image with the executing condition: dmx-hide="sc1.state.executing".

[armean]

Guess that the problem wasn’t the late response.

With that I could tell that it is waiting for the server action to be executed but then it shows first the default image and the useravatar afterwards…

Thanks @sid !