Ok, the path to the images of my site is often the full URL to the image. Starting with http://
I don't want this, because when the site is finished I need to move it to a new domain, then all images don't work anymore.
But I can't figure out what I must give as a path for the images to be displayed correctly.
My full addres is now: http://mysite.nl/geoffrey/wp-content/themes/interio_child/images/image.png
I want to call images from /wp-content/themes/interio_child/images/image.png
or better: /images/image.png
How do I make this working for both stylesheets and normal pages in all cases? Stylesheets are in a different dir named /interio_child/stylesheets/
Use relative paths.
In css for example your can use "../images/image.png" assuming that your css lies in "wp-content/themes/interio_child/css/mycss.css" and the image in "wp-content/themes/interio_child/images/image.png"
In your script you can use variables like "$template-path = 'themes/interio_child/';" and access the image using "$imagepath = $template-path.'images/image.png';"
suppose your images are in "images" folder and your page is in "Page" folder then , you need to specify:
src="../images/image.png"
if your images are in "images" folder and your page is in "page2" sub folder under "page" folder then , you need to specify:
src="../../images/image.png"
simply you need to know just level of sub directory...
Related
The image describes the main website folder that contains nested files and folders of website can i place like this ?
Yes, of course, you can even put other folders inside the sub-folder. If you are using this for a navigation bar or whatever, when making links, use:
/subfolder/page12345.html
and not:
https://mysite/subfolder/pag12345.html
you can use both but he first option gives cleaner code.
When I try to upload an image file form my computer in my html file it doesn't show up in browser. But if I link a image file from the web it works. I've copied the file path correctly and made sure the extensions were correct. Is it something wrong with the file itself?Code In Question
In the picture you've attached you're placing an absolute filepath inside src while it should be relative, considering the file might be in the same folder as the HTML, but not in the same user folder/operating system etc.
To fix your issue I have an example below.
Folder layout:
website
index.html
images
myimage.jpg
Referencing:
How to reference to myimage.jpg relatively is by putting images/myimage.jpg inside the src attribute. The way you're doing it is website/images/myimage.jpg, but another user might not have the website in a folder called website but website2 for example.
I am trying to get my css file using background: url(); to use the correct path to display my images on my index.html, this webpage is a 1 page index.html which just displays static content and some images, nothing fancy, I currently have it on google drive being hosted perfectly fine.
It's just the image paths are not working when they are set to relative which would be "img/example.png" and they don't work with the link you get from setting the images to public so they can be viewed by anyone which for example would be "https://drive.google.com/file/d/IMAGE_CODE/view?usp=sharing"
How have you managed to get your images to load on drive using CSS background: url();?
I don't want a direct sort of link so every time my website refreshes it has to re download the images, that creates very slow refresh page loading, I want it to look for them just like a relative path with much faster loading.
You may have an issue with your path being in the wrong directory, so you would use
../
to move up a directory until the correct one is reached. For example, if your css file is located in a folder structure such as "root/assets/stylesheets/style.css" and your image is at "root/img/image.png" then within your css file, you would have to use the following code
background-image: url('../../img/image.png');
to move up two directories to properly call your image.
so evidently according to this Using relative URL in CSS file, what location is it relative to?, css that is loaded from the link tag references files in relation to the folder that the css file is in...
so here's my directory structure:
httpdocs/
css/
thecss.css
bg.png
so thecss.css contains the following entry
#guinea {background-image:url(bg.png)}
but the problem is...the image is not showing up even though it's in the exact same directory with the css....
on the other hand if I change it to this:
#guinea {background-image:url(http://localhost/css/bg.png)}
it would work!
using url(/css/bg.php) doesn't work either...
what am I doing wrong? why is my relative url include not working?
I would say it's best to separate your images and your styles.
So place your bg.png in an images folder and reference it as so...
#guinea {background-image:url(../images/bg.png)}
I had created one HTML page for my experiance. In this i had use the background image like c:\documents ans settings.....\leftline.png.
But i don't know how to add images from a common directory. (like background-image= ('./images/leftline.png'). how i can do like this?
The second line you have is a relative address, relative to the "thing" that is calling it.
So, say you have a webpage called "index.html" and it lives in
C:\My Documents\WebPages\My Page. You might also have C:\My Documents\WebPages\My Page\images\leftline.png
Now, rather than type in "C:\My Documents\WebPages\My Page\images\leftline.png" we can simply use "images\leftline.png" in our index.html page. Why? Well, check the locations:
C:\My Documents\WebPages\My Page\images\leftline.png
C:\My Documents\WebPages\My Page\index.html
RELATIVE to index.html, leftline is only one directory away, so you can address relatively.
You have to save the images inside the directory of your website and then you can acess these images using relative path.
If your page for example Default.htm lies inside the virtual directory WebSite1 then you can create a folder for images say 'Images' and can point to an image inside the 'Images' directory by using 'Images/image1.jpg'
If from your html file you have to traverse a folder up then you can use '../Images/image1.jpg'
You can also give an absolute path for the image like http://.....
Put the files in a directory that is in the same folder the html file is in. name the folder images.
You need to have this image inside your website.
And then the trick is to work out what URL to use (that's apparently your problem).
When you use an HTML image tag () in you page, then the browser sees the URL you specify. If that URL is relative (does not start with "http://" or a "/"), then it is sees as relative to the URL of the page. So usually you will need some "../" to go back to the root of the site and then back up again to the image.
A URL that is specified inside a .css file is relative to that css file.
If you use asp.net and want to specify the image-url in a server tag ( for instance), then you can use a "~" as first character to specify the "root of the site". This will work only if that URL is processed by the server as a property of some server control.