Images not displaying properly

Elements Beta Feedback
1

RapidWeaver Elements 10 (22867)
Added images are not visible in the design. A blue square with a question mark appears everywhere.They are visible in the preview in Safari, though.

Scherm­afbeelding 2024-08-21 om 10.59.09
Scherm­afbeelding 2024-08-21 om 10.59.092742×1008 321 KB

2

After closing and reopening, the problem seems to be solved.

3

hmm, one to keep an eye on :thinking:

4

New bug: Image shows up in Elements, but not by the preview in my browser (Edge)

Scherm­afbeelding 2024-08-21 om 11.53.08
Scherm­afbeelding 2024-08-21 om 11.53.081920×1391 1.91 MB

Scherm­afbeelding 2024-08-21 om 11.53.29
Scherm­afbeelding 2024-08-21 om 11.53.292222×524 33.8 KB

5

I have had the same issue with images showing in Elements but not on the preview. And the other way around.

6

could we get a bit more info?

can you send over:

  • image format (jpg, webp, etc)
  • if you are resizing the image via the Image component controls?
  • a screenshot/video of the component in Elements, with the image controls shown

Thanks! :slight_smile:

7

It’s a webp format. It seems the webp format is the problem. Changed it with a png and that seems to work fine (in elements en in the browser preview).

You can see the controls in the screenshot.

Scherm­afbeelding 2024-08-21 om 16.11.56
Scherm­afbeelding 2024-08-21 om 16.11.561920×1272 1.34 MB

8

I’m using .png’s from the Resources

Screenshot 2024-08-21 at 15.12.10
Screenshot 2024-08-21 at 15.12.103986Ă—2478 1010 KB

Screenshot 2024-08-21 at 15.12.58
Screenshot 2024-08-21 at 15.12.583584Ă—2478 691 KB

9

Hi @Dean can you send over your project file to dan@realmacsoftware.com so we can take a look!

10

On it’s way :smiley:

11

Got it, will take a look and email you back!

12

Hi @Dean ,

The Custom Component is causing rendering errors as it looks like you’ve pasted an entire webpage into it :grimacing: You really just need form fields, but I did see it’s currently using Bootstrap, so you’d also want to convert the classes to Tailwind…

CleanShot 2024-08-24 at 8 .49.44@2x
CleanShot 2024-08-24 at 8 .49.44@2x1920Ă—1184 577 KB

The images are not appearing here as the URL’s are not correct in the editor (as the editor uses temp paths). There’s probably a few ways to solve this.

I’d add an image drop well to the properties component.

CleanShot 2024-08-24 at 9 .04.46@2x
CleanShot 2024-08-24 at 9 .04.46@2x1920Ă—1184 626 KB

To do this you’d paste the following into the Properties

{
    "groups": [{
        "title": "Image Resource Example",
        "properties": [{
            "title": "Card Image",
            "id": "cardImage",
            "image": {}
        }]
    }]
}

Then where you want your image path in the Template you can use the {{carImage}} tag. Like this:

<img src="{{cardImage}}" class="rounded-lg w-full" />

Phew, hope that helps :sweat_smile:

P.S. I’ve just emailed you the project with this change in it.

13

Hi @Dan C. ,
Thank you for your help, it’s good to know it was me being silly and not a bug with Elements. You have put me back on the right track. :pensive:

Once again, thanks for all your help and keep up the great work,.

1 Like