troubleshooting Question

On Windows 10 OS: XAMPP/APACHE/PHP - hosting multiple sites inside xampp/htdocs - relative paths not working

Avatar of Tom Knowlton
Tom KnowltonFlag for United States of America asked on
Web BrowsersApache Web ServerWindows 10Chrome* Hosting
4 Comments1 Solution464 ViewsLast Modified:
Windows 10 OS, Chrome browser:

 I am struggling with relative paths when running local sites in xampp / apache

When I run my site locally like this:

localhost/ukfnew

The page loads but the images don't load due to path issues. I checked the image paths and they are attempting to load from:

localhost/images/someimage.jpg

when my intent is to load them like this:

localhost/ukfnew/images/someimage.jpg


Now, I realize I could modify the pah for the anchor tag href attribute in HTML when pointing to an image:

/ukfnew/images/someimage.jpg

But this would fail once it was pushed to the server.  Having to remember to change the path back every time I push live sounds wrong-headed to me and not best-practice.


I've made what I thought were the appropriate <Virtual Host> entries in

C:\xampp\apache\conf\extra\httpd-vhosts.conf:

# Virtual Hosts
#
# Required modules: mod_log_config

# If you want to maintain multiple domains/hostnames on your
# machine you can setup VirtualHost containers for them. Most configurations
# use only name-based virtual hosts so the server doesn't need to worry about
# IP addresses. This is indicated by the asterisks in the directives below.
#
# Please see the documentation at 
# <URL:http://httpd.apache.org/docs/2.4/vhosts/>
# for further details before you try to setup virtual hosts.
#
# You may use the command line option '-S' to verify your virtual host
# configuration.

#
# Use name-based virtual hosting.
#
##NameVirtualHost *:80
#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ##ServerName or ##ServerAlias in any <VirtualHost> block.
#

NameVirtualHost 127.0.0.1:80

<VirtualHost 127.0.0.1:80>
  DocumentRoot "C:/xampp/htdocs/"
  ServerName localhost
</VirtualHost>


##<VirtualHost *:80>
    ##ServerAdmin webmaster@dummy-host.example.com
    ##DocumentRoot "C:/xampp/htdocs/dummy-host.example.com"
    ##ServerName dummy-host.example.com
    ##ServerAlias www.dummy-host.example.com
    ##ErrorLog "logs/dummy-host.example.com-error.log"
    ##CustomLog "logs/dummy-host.example.com-access.log" common
##</VirtualHost>

##<VirtualHost *:80>
    ##ServerAdmin webmaster@dummy-host2.example.com
    ##DocumentRoot "C:/xampp/htdocs/dummy-host2.example.com"
    ##ServerName dummy-host2.example.com
    ##ErrorLog "logs/dummy-host2.example.com-error.log"
    ##CustomLog "logs/dummy-host2.example.com-access.log" common
##</VirtualHost>



<VirtualHost robotz>
  DocumentRoot "C:/xampp/htdocs/robotz/"
  ServerName robotz

  CustomLog "C:/xampp/htdocs/robotz/robotz.access.log" combined
  ErrorLog "C:/xampp/htdocs/robotz/robotz.error.log"

  <Directory "C:/xampp/htdocs/robotz/">
    Options Indexes FollowSymLinks
    AllowOverride All
    Order allow,deny
    Allow from all
  </Directory>
</VirtualHost>

<VirtualHost ukfnew>
  DocumentRoot "C:/xampp/htdocs/ukfnew/"
  ServerName robotz

  CustomLog "C:/xampp/htdocs/ukfnew/ukfnew.access.log" combined
  ErrorLog "C:/xampp/htdocs/ukfnew/ukfnew.error.log"

  <Directory "C:/xampp/htdocs/ukfnew/">
    Options Indexes FollowSymLinks
    AllowOverride All
    Order allow,deny
    Allow from all
  </Directory>
</VirtualHost>

and in the C:\Windows\System32\drivers\etc\hosts file:

# Copyright (c) 1993-1999 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

# localhost name resolution is handle within DNS itself.

127.0.0.1       localhost
127.0.0.1       robotz
127.0.0.1       ukfnew
#       ::1             localhost

Must be something dumb I am missing but I am brand new to apache / xampp / php so I do not know what is needed. When I push the site live - it works just fine with the relative paths.  Hmmm...  I wonder what the server settings are....

Still - I'd like to get a few replies in case I don't find the answer, ha ha.

Thank you,

Tom
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 4 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 4 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros