Problems with images in Wappler

[RodrigoBarata]

Hello everyone, how are you all?

I am having some issues uploading images to my app. When I download let's say icons for example in svg. format I can upload and It works fine in my app.

But the thing is that when I try to upload other images it doesn't work, I've done a simple design on canva and I download it in svg. format and it doesn't work. It's svg. as well...

Can someone help or give me a explanation on why is this happening?

Thanks in advance,
Rodrigo

[Teodor]

Is this a problem in design view only or also in the browser, when you preview your page?
Can you please paste the code of the element, where this image is included?

[RodrigoBarata]

Hello, Teodor

In the browser doesn't work either...

Yes, sure:

div class="d-flex style261 flex-column">
div class="d-flex flex-row style263 align-items-center">
img width="20" height="20" src="assets/images/Icons/light_mode_24dp_000000_FILL0_wght500_GRAD0_opsz24.svg">
h1 class="style262">Light Theme
/div>
div class="d-flex">
img src="assets/images/Dark%20and%20Light%20Mode/Untitled.png" width="300" height="200">
/div>
div class="d-flex flex-column">
h1 class="style262">Light Mode
h1 class="style265">Bright, vibrant design for well-lit spaces.

Do you want it like this? Or I just copy paste the code?

[Teodor]

Please paste the code as it is, don't remove any opening tags. Just follow this guide on how to add code in your post:

How to format code in your posts

Code Formatting When pasting code in your posts, please use the following formatting options, in order to be sure your code is readable and well formatted for the rest of the users. Inline code formatting Surround a section of code with backticks (`) inline code formatting. Typing: `var x = 10;` Results in: var x = 10; This can also be done as var x = 10; inline. Multi-Line Blocks of Code Surrounding code with three backticks ``` will allow for code to span multiple lines Typing: ``` f…

[RodrigoBarata]

Ok, like this?

<div class="d-flex style261 flex-column">
    <div class="d-flex flex-row style263 align-items-center">
        <img width="20" height="20" src="assets/images/Icons/light_mode_24dp_000000_FILL0_wght500_GRAD0_opsz24.svg">
        <h1 class="style262">Light Theme</h1>
    </div>
    <div class="d-flex">
        <img src="assets/images/Dark%20and%20Light%20Mode/Untitled.png" width="300" height="200">
    </div>
    <div class="d-flex flex-column">
        <h1 class="style262">Light Mode</h1>
        <h1 class="style265">Bright, vibrant design for well-lit spaces.</h1>

[Teodor]

In your browser open dev tools, reload the page and look for errors under Network:

[RodrigoBarata]

Ok, I get this error:

The thing is that only images that I download from a website works. this image that I am trying to put on was downloaded by canva.

[Teodor]

So the error says the following image cannot be found here:

assets/images/Dark%20and%20Light%20Mode/Untitled.png

First - never use spaces in the folder names, especially with web/app development. That is a bad practice and really not recommended as it causes problems. Remove the spaces from the Dark%20and%20Light%20Mode folder. Name it Dark_and_Light_Mode for example. When you rename this folder, check if the image is actually there and assign it to the img element again (select it again from the image picker on the page).

[RodrigoBarata]

Wow. It works perfectly!

You must be a genius hahaha! Thanks mate!

Problem solved!