Can't understand how relative links work on Q2A

Question

I have added a custom HTML at the top of every page in wich i display an image, using this code :

<div class="cover-pic"> 

<img src="modal.png">

</div>

I have placed the image in the root folder ( next to plugin, theme,... folders). 

Everything is perfect at the landing page the image displays as expected, but once i clic on a tag for exemple the image disapears. How comes ? that is mean that i am on level down so i have to use src="./modal.png" instead ?

Answer 1

Yes. File URL must be absolute or relative.

Absolute path example: http://YourSiteURL/path/to/your/file <<< This is always constant in all pages.
Relative path example:  ../../path/to/your/file  <<< This is changed by page URL.

Below codes are absolute example.

1. Case of stand alone HTML (Hard coding): This is most easy.

<div class="cover-pic"> 

<img src="http://YourSiteURL/modal.png">

</div> 

2. Case of stand alone HTML (PHP): This is difficult. (Require qa-include/qa-base.php)

<div class="cover-pic"> 

<img src="<?php echo qa_path_to_root();?>modal.png">

</div>

3. Case of inner theme.php of your theme: This is relatively easy. I recommend.

$html  = '<div class="cover-pic">';
$html .= '<img src="' . qa_path_to_root() . 'modal.png">';
$html .= '</div>';
$this->output($html);

    Code example of Q2A logo image is qa-include/qa-page.php L652.

There are other correspondence methods.

Comments

Thank you sir Sama ! this is so clear !