A simple question with dynamic image

Wappler General Need Help
1

Hello everyone, sorry if this sounds like an obvious question:

Have 2 scenarios where api returns:
1.- "filename": "80.svg"
And using:

<img dmx-bind:src="'assets/images/'+serverconnect_image.data.filename">

Always get:

http://localhost:4000/assets/images/ 404 (Not Found)

But in this example:
2.- "path": "/assets/images/80.svg"

<img dmx-bind:src="serverconnect_image.data.path">

It seems fine and no 404 error on console..

I know it's a timing issue, but there's a way to avoid the 404 on console using example 1?
.default() is not an option
It's mandatory to use a full path on db?
Tried some ternary operation but no luck..

Thanks!

2

You should be able to put the image inside a conditional element - with the path being present as the condition.

Alternatively you could use a ternary statement on the dynamic src

serverconnect_image.data.path.length() ? serverconnect_image.data.path : 'some static path'
3

Example 1 should work; I use this pattern in all my projects. If you check the Demo Dynamic Real Estate Site, you’ll see the same usage: <img alt='Property Image' dmx-bind:src="Photo">

The 404 you’re seeing usually means the filename is empty on first render, so the browser tries to load assets/images/ before the data arrives.

Try wrapping the <img> in a conditional so it only renders when the filename exists. Something like:

<div dmx-show="serverconnect_image.data.filename">
  <img dmx-bind:src="'assets/images/' + serverconnect_image.data.filename">
</div>

This prevents the browser from making the initial empty request.”

4

Thanks both for the replies, I knew this was something more simple..

Here's the reason:

Sorry for the bad resolution, but it seems edited values were not being saved..

Restarted and issue has gone, value saved and no more 404 error, don't know if I can reproduce it again for a bug report, will check it out

Again, thanks both @bpj @ben

1 Like