Page 1 of 1

Beginner struggeling with images.

PostPosted: 30. April 2021 20:02
by SunnyRome
Hi everyone,
I just started out with XAMPP, coding and Linux, so don't know a lot, yet.
When I try to paste an image, it does not show in my localhost-site, only that faulty-image-thingy that looks like a page torn in half. I am pretty sure I use the correct file path, I copied the one from the properties of the said image file.
The image is far less than 2 MB big and located in the same folder as the php code. Linking multiple pages (index page with pages from its links) hasn't been a problem.

Code: Select all
<html>
    <head>
        <title>GsVitamins</title>
    </head>
    <body>
    <DIV style="position: absolute; top:100px; left:500px; width:200px; height:25px">
        <h2>Vitamins</h2>
        <?php
       echo "<img src='/opt/lampp/htdocs/GsVitamins/rx.png'/>";
       ?>
    </div>
        <a href="index.php">Click here to go back<br/><br/>
    </body>
</html>


Is this a known issue? How can I solve this? What am I doing wrong?
Thanks in advance!

(Also I can't seem to open control panel of XAMPP, but that's less of an issue, I just start it through terminal)

Re: Beginner struggeling with images.

PostPosted: 30. April 2021 20:08
by Altrea
Hi,

You don't have to specify the system save path of the file. Images are getting requested by the client browser, so it needs to be a valid absolute or relative url that can be requested by the client browser.

Re: Beginner struggeling with images.

PostPosted: 30. April 2021 20:32
by SunnyRome
Altrea wrote:You don't have to specify the system save path of the file. Images are getting requested by the client browser, so it needs to be a valid absolute or relative url that can be requested by the client browser.


Is something wrong with the pictures' URL, maybe? I copied it from the file itself, so I figured it should be correct.

Re: Beginner struggeling with images.

PostPosted: 30. April 2021 20:47
by Altrea
SunnyRome wrote:<img src='/opt/lampp/htdocs/GsVitamins/rx.png'/>

this is not correct. This is a file path, not a url ressource.
A url ressource looks like "http://localhost/GsVitamins/rx.png"

Re: Beginner struggeling with images.

PostPosted: 30. April 2021 21:45
by SunnyRome
Altrea wrote:this is not correct. This is a file path, not a url ressource.
A url ressource looks like "http://localhost/GsVitamins/rx.png"


I saw examples of pictures put in there directly from a file path. Am I mistaken or did I miss something?
Can't I link pictures from the same folder via file path, just like linking php files from the same folder?
Do I have to post pictures via URL?
(Thank you for taking the time with me)

Re: Beginner struggeling with images.

PostPosted: 30. April 2021 22:08
by Altrea
There are multiple ways to include an image url.
Here are some examples:

Absolute URL:
Code: Select all
<img src='http://localhost/GsVitamins/rx.png'>


Relative URL based to the DocumentRoot
Code: Select all
<img src='/GsVitamins/rx.png'>


Relative URL based to the delivered file (same folder as the html/php file the image is written)
Code: Select all
<img src='rx.png'>


Relative URL based to the delivered file (subfolder of the html/php file the image is written)
Code: Select all
<img src='subfolder/rx.png'>

Re: Beginner struggeling with images.

PostPosted: 30. April 2021 23:05
by SunnyRome
Altrea wrote:There are multiple ways to include an image url.
Here are some examples:
Absolute URL:
Code: Select all
<img src='http://localhost/GsVitamins/rx.png'>

Relative URL based to the DocumentRoot
Code: Select all
<img src='/GsVitamins/rx.png'>

Relative URL based to the delivered file (same folder as the html/php file the image is written)
Code: Select all
<img src='rx.png'>

Relative URL based to the delivered file (subfolder of the html/php file the image is written)
Code: Select all
<img src='subfolder/rx.png'>


Thank you so much, that's all I needed!