Sunday, July 3, 2022

[FIXED] How can I locally address an <img> without xampp prepending localhost to the image address

Issue

I'm using Xampp locally to run php within a directory structure like this:

D:/LaunchBox/mySoftware/xampp-project/index.php

I'm trying to display an image with HTML that resides here:

D:/LaunchBox/Images/Platforms/myImage.png

So my tag is:

<img src="D:/LaunchBox/Images/Platforms/myImage.png">

The image isn't being displayed. If I hover over the image address when using "inspect" within Chrome I see the following address:

http://localhost/D:/LaunchBox/Images/Platforms/myImage.png

I've tried just using ../Images/etc but to no avail.

I'm sure I'm missing something simple but I'm stuck? Anyone got any ideas?


Solution

Right, I've cracked it. Just in case someone else has a similar issue this is what I did. I set up Virtual Hosts in Xampp following the instructions here

Then I addressed my software with the following inside xampp\apache\conf\extra\httpd-vhosts.conf

<VirtualHost *:80>
DocumentRoot "D:\LaunchBox"
ServerName arcade-project.com
<Directory "D:\LaunchBox">
</Directory>
</VirtualHost>

I can now access my project with the URL arcade-project.com

And, from within my code, I can display images by just using a relative URL such as:

./Images/Platforms/myImage.png


Answered By - John T
Answer Checked By - Pedro (PHPFixing Volunteer)

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.