I like to include an image from the web root directory(www). In the HTML I am using the following code:
<img src="images/logo.png" alt="logo" />
But the above code is looking for the image from current directory and then images/logo.png
I do not want to include absolute path on my html code. Is there any easy method to do it?
You can use paths relative to the web root by starting with a slash.
<img src="/images/logo.png" alt="logo" />
As you've found, starting without a slash is relative to the current document.
<img src="../../../images/logo.png" alt="logo" />
try like this. each ".." will used to go parent directory
<img src="/images/logo.png" alt="logo" />
You have to mention in this manner. The reason is when u mention the path without slash like this
`<img src="images/logo.png" alt="logo" />`
It will consider it as the path from the root. But you are not actually providing the full path. The procedure to start without slash is
<img src="c:/wamp/www/{proj name}/images/logo.png" alt="logo" />
So better go for the first one by starting with "/"
How to include the image from the relative Directory to a root Directory in php
Related
I have my header file for my website and a bunch of images that are inside the header that I want to link to various pages within the website.
I'm currently referencing the images from within the header file like this:
<header>
<div id="menu">
<div class="table">
<ul id="horizontal-list">
<li> <img src="../home page/home.png" alt="Home Page" width=150 /></li>
<li> <img src="../dashboard page/dashboard.png" alt="User Dashboard" width=150 style="padding-left: 35px;" /></li>
</ul>
</div>
</header>
The problem with this approach, since those file paths are relative, they don't work if I reference the header file from a sub directory that upon traversing those relative file paths, it's unable to find the files located.
Since I have my web pages all inside different directories, using this approach means that while the files in one directory will be able to find the images for the header file perfectly ok, the web pages inside another directory aren't able to find the images.
I tried changing my relative file paths to absolute file paths like so:
change
"../home page/home.php"
"../home page/home.png"
to
"C:/xampp/htdocs/login/website php version/home page/home.php"
"C:/xampp/htdocs/login/website php version/home page/home.png"
but this didn't work either
Trying to use php to link to an image in a different folder than the file I am currently in but the image isn't showing.
Here's the path file:
<?php
if (!defined("ROOT_PATH")) define ("ROOT_PATH", realpath(dirname(__FILE__)));
if (!defined("BASE_URL")) define ("BASE_URL", "http://localhost/stnresp");
?>
Here's the code I am using at the moment:
<div class="logo-image">
<img class="header-logo" src="<?php echo ROOT_PATH . '/assets/images/stn-logo-cropped.png'; ?>" alt="">
</div>
I can't understand why the root path isn't taking the link to the root directory and then through to the image? What am I missing?
Thanks
realpath defines the physical path of the file, instead the src attribute of the image needs url path.
In your case you have to use BASE_URL instead of ROOT_PATH:
<div class="logo-image">
<img class="header-logo" src="<?php echo BASE_URL . '/assets/images/stn-logo-cropped.png'; ?>" alt="">
</div>
I'm creating a new WordPress Theme and I want a media folder to contain some images that are not considered to be posts.
e.g. themes/theme-name/media/sampleIMG.jpg
adding
<img src="media/sampleIMG.jpg">
in my theme folders index.php leads to an 404 error code output because apparently my local apache server is requesting that file from a different directory:
/html/media/sampleIMG.jpg
What am I doing wrong?
<img src="<?php echo get_stylesheet_directory_uri();?>/assets/images/logo.svg" alt="" class="svg logo">
Using get_template_directory_uri() to link a static image with its correct path in html :
<img src="<?php echo get_template_directory_uri(); ?>/media/sampleIMG.jpg" alt="theme logo" />
Note: get_template_directory_uri() return absolute path to the
directory of the current theme.
Alright, I have a file named slider.php which contains a bootstrap slider and I'm inserting pictures inside the slider but I can't figure out the correct way of writing the path to the pictures
<div class="carousel-inner">
<div class="item active">
<img class="slide-image" src="" alt="">
</div>
<div class="item">
<img class="slide-image" src="" alt="">
</div>
<div class="item">
<img class="slide-image" src="" alt="">
</div>
The slider.php is in this location ecomcopy/resources/front/slider.php
and the pictures are in ecomcopy/resources/img/
I tried everything and I can't get the correct pictures path
Can someone help?
The way paths work is to go "up" to parent folders until you're at a common ancestor. Then go back down naming folders until you get to the file you're referencing.
ecomcopy/resources/front/slider.php
ecomcopy/resources/front/ (start)
ecomcopy/resources/ (up 1) ../
ecomcopy/resources/templates/ (down to folder) templates/
ecomcopy/resources/templates/img/ (down to folder) img/
ecomcopy/resources/templates/img/yourimage.png
(down to file) yourimage.png
result: ../templates/img/yourimage.png
should be ../../img/image_name.png
It would be much easier (at least on a live server setting) to just specify absolute paths for your URLs.
For example, the following HTML is all that is needed to serve your images:
<img src="/ecomcopy/resources/templates/img/yourimage.png" />
There is no real need to worry about complicated relative file paths.
I have been seriously been looking at this forever! I'm going out of my mind And can't figure out why my images are not displaying in my custom made footer.
I have firefox with firebug and it is simply saying that the url is failing to load. so I copy and pasted a url to an image that is currently working and is being shown via the background property in CSS just fine. (thats the top one that says dakota jones). copy and pasting the exact img src proves it still not to work.
my folder is images. My functions.php is right outside. the hierarchy is correct. what the heck?? The testing text in the p tags work just fine. uhuhuhu
Somebody help me! I'm using wp and genesis theme.
add_action('genesis_before_footer', 'include_sponsors');
function include_sponsors() { ?>
<div class="sponsors">
<p>This is testing text</p>
<img src="images/dakotajonesheader3.jpg" alt="Smiley face" height="42" width="42" />
<img src="images/tfobw.png" />
<img src="images/basskingbw.png" />
<img src="images/bighawgbw.png" />
<img src="images/kbw.png" />
<img src="images/mccoybw.png" />
<img src="images/nfcbwpng" />
<img src="images/rayjusbw.png" />
<img src="images/rrbw.png" />
</div>
<?php }
Use WordPress' inbuilt function:
<?php
bloginfo('template_directory'); ?>/images/dakotajonesheader3.jpg
?>
.. which will reference /wp-content/themes/your-theme/images/dakotajonesheader3.jpg
Wordpress dynamically rewrites URLs, so the URL you use to access a page is not the same as the path to the scripts that are running on the server. So you might request your page with example.com/Home. But your images are not stored in example.com/Home/images, which is where you're telling your browser to look. They're stored in example.com/wordpress/wp-content/themes/your_theme/images. So you have to give the absolute path to the images to the browser in your <img> tags.
Carson is correct, and you can use absolute paths to your images. Alternatively, if you want to avoid using absolute paths, you can call your images using bloginfo('template_directory');
For example:
<img src="<?php bloginfo('template_directory'); ?>/images/dakotajonesheader3.jpg" alt="Smiley face" height="42" width="42" />