How to get images to display on website while using XAMPP on Macbook Pro

How to get images to display on website while using XAMPP on Macbook Pro

I built an HTML/CSS website and then added PHP functionality. Installed XAMPP. Since installing XAMPP, everything on the site works except the images. Image files don't display. They are all properly referencing the directory. In fact, before using XAMPP, the images displayed fine on the HTML webpages. After using XAMPP and re-saving as .php, they stopped working. Nothing else changed. I figure it must be a settings issue. Thoughts, anybody?

Thanks a billion in advance!

Answer by Manuel Arwed Schmidt for How to get images to display on website while using XAMPP on Macbook Pro

Its probably an issue with accessing local files on a "domain" that is not local. Just update you're images path to something relative or within localhost and it will be fine. Its a browser security thingy to not load local files when you are not opening a file directly from a file path. (Cross-domain or Same-origin policy). The idea is to not let any website sniff your local files and it doesn't work differently for localhost which can be an alias to any IP (doesn't nnecessarily to be 'local').

To fix this issue, move all your assets into the folder that is the root for localhost and e.g. use "images/someImage.jpg" instead of "c:\somePath\someImage.jpg". You cannot mix up c:\ with a page served from http://localhost/.

You will see this issue popping up in the network panel of chrome developer tools or Firebug extension when working with Firefox. It's really NOT recommended to, but it's possible to turn off this crucial security settings: http://joshuamcginnis.com/2011/02/28/how-to-disable-same-origin-policy-in-chrome/ - I would warn anybody to do it that way, though.

Answer by Syntax Error for How to get images to display on website while using XAMPP on Macbook Pro

@Manuel is right. If the problem persists, try absolute paths in image src. The absolute paths will be like http://localhost:8888/your-website-folder/your-images-folder/your-image-name In windows you don't use port number (which is 8888) in this case

Good luck.

Answer by John Steve for How to get images to display on website while using XAMPP on Macbook Pro

I figured out the problem: all of my images had permissions marked: "everyone: no access." I changed it to: "everyone: read only" I did this simply by right clicking (aka control-clicking) each image and then clicking "get info." I then scrolled down to "Sharing & Permissions." It's self explanatory from there. Thanks for the help everyone!

Answer by Raj Rj for How to get images to display on website while using XAMPP on Macbook Pro

@john steve I had also the same issue. I tried lots of thing suggested on different forums but it did not work. Finally I set up permission for each images and it worked.

Answer by Maihan Nijat for How to get images to display on website while using XAMPP on Macbook Pro

I just had the same problem. And the reason was that my images folder had no-access permission. I changed the permission to Read/Write for admin and Read-only for everyone else. It is possible to change permission for each individual time but it is time consuming, therefore changing the permission of parent folder is effective.

The following steps are for MAC OS:

• Open applications folder
• Locate XAMPP folder
• Right click > get info.
• In pop-up window locate the 'sharing & permission' section
• Click the 'locked' padlock symbol
• Enter admin password
• Change 'Everyone' permissions to read & write
• In the get info window still, select the 'cog' icon' drop down option at the very bottom and select 'Apply to enclosed items' this will adjust the permission across all sub-folders as well.
• Re-lock the padlock symbol
• Close the 'Get Info' window.

And for Windows: -

• Locate XAMPP folder
• Right-click the folder, click Properties, and then click the Security tab.
• Click Edit to open the Permissions for