I have some js scripts that are working on my site but I have found that some of the images are not showing up. I only have this issue with WordPress. So I have a pause button that shows as it's supposed to. When you press the button, it pauses the script as it's supposed to. When this happens, a new image is added to replace the pause button. The image gets inserted into the page. So it looks like this when it's playing

 <img id="pauseplay" src="http://www.example.com/wp-content/themes/theme/images/pause.png" alt="">

When I press the pause button, it changes to this

 <img id="pauseplay" src="images/play.png" alt="">

obviously this is a problem with absolute to relative links but I don't know how to fix it. Why don't relative links work in WordPress?

2 Answers 2


Relative URLs work nicely in wordpress, which is the reason for your failures. In general never use relative URLs for resources as they will most likely fail when a site is using "pretty permalinks".

Best thing for what you are doing is to "group" the graphical resources and styling in a CSS (in which resources are relative to the CSS file and not the HTML URL).

The JS alternative is to store the root of the site/theme/plugin in a JS variable and use it to construct the URL. Followin code is to take site root into consideration, but you most likely will want theme or plugin root.

  var homeurl = '<?php echo home_url()?>';
  pauseImage = homeurl+"images/play.png"; // url to your play image

try a backslash '/' in front of 'images/play.png'

so the url will look like this: '/images/play.png'

(assuming your images directory is in the root of your site)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.