I am new to wordpress. i have a raw html box in my page having img link

<button><img src="./wp-content/uploads/2018/05/video-popup.png" ></button>

it shows img url as ''mysite/beta/wp-content/uploads/2018/05/video-popup.png" when i use same in custom post type it shows a 404 error with the url link ''mysite/beta/dictionary/a/wp-content/uploads/2018/05/video-popup.png"

dictionary is the post type and 'a' is the page of dictionary type. kindly help me out of this how to get rid of this issue

  • please try to <img src="<?php the_field('image'); ?>"> – Dharmishtha Patel Jun 7 '18 at 10:32
  • i'm using raw html element of visual composer/wp-bakery plugin. i can''t write php there. – User6007962 Jun 7 '18 at 10:37
  • Why is there a . at the beginning of your URL? – Tom J Nowell Jun 7 '18 at 11:05
  • @TomJNowell dot indicates one step back to root than goto wp-content and so on – User6007962 Jun 7 '18 at 11:35
  • . means current directory, .. means parent directory – honk31 Jun 7 '18 at 14:33

Add this following function to your functions.php of your theme or child theme.

function homeURLshortcode()
    return home_url();
add_shortcode('homeurl', 'homeURLshortcode');

This will create a shortcode like [homeurl] which you can use to add in any visual editor and it will render as your main domain address, like http://domain.com.

So for your image url you need to add [homeurl]/wp-content/uploads/2018/05/video-popup.png

  • Thank you so much for your answer it absolutely solved my problem. @ovidiua2003 – User6007962 Jun 8 '18 at 5:01
  • you are very welcome. – Ovidiu Jun 8 '18 at 5:30

The problem is that these URLs are all relative URLs that refer to the current URL. That's the URL of the post, not the URL of the site, which means wether it works or not will depend on where on the site you are. As a result the URL needed to make this work changes for each individual page you visit

E.g. on my own site tomjn.com I have the wp-content folder at tomjn.com/wp-content

If I use /wp-content it always refers to tomjn.com/wp-content

But, if I use a relative path, it gets appended to the current URL e.g. for ./wp-content or wp-content I get:

  • On tomjn.com it will try to load tomjn.com/wp-content
  • On tomjn.com/wp-admin it will try to load tomjn.com/wp-admin/wp-content which won't work
  • On https://tomjn.com/2018/04/19/leafleting-wordcamps-a-psa/ it will try to load https://tomjn.com/2018/04/19/leafleting-wordcamps-a-psa/wp-content which won't work
  • On https://tomjn.com/2018/03/16/utility-taxonomies/ it will try to load https://tomjn.com/2018/03/16/utility-taxonomies/wp-content which won't work
  • On https://tomjn.com/articles/ it will try to load https://tomjn.com/articles/wp-content which won't work

So the solution is to use absolute paths, or, use paths relative to the root e.g. /wp-content/uploads

Of course, the real solution is to not hardcode paths at all, and to use attachment IDs and WP APIs to generate the URLs.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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