Hello I have a website with image links like this:
<img src="/flower.jpg"/>
I have a task to change the website path from www.domain.com to www.domain.com/blog. as www.domain.com will be used for a different site.
I am handling the redirect with nginx so www.domain.com/blog loads up the new website but the assets and images are not loading obviously because the links like <img src="/flower.jpg"/> are searching for images at :
www.domain.com/flower.jpg
whereas the image is available at
www.domain.com/blog/flower.jpg
Now I dont want to change the paths everywhere in the code. whats the best way to achieve what I need.
I just re-read your question and realised you've already moved your image files.
If you're using Apache you can try setting up a virtual host for you /blog directory, and set DocumentRoot in the config?
Otherwise I'm afraid you've got a lot of path adjusting to do in your code.
I think you can choose location or rewrite.
The location-method:
location ~ /[^/]*.jpg {
root /your/images/directory;
}
The rewrite-method:
rewrite ^/([^/]*)\.jpg$ /blog/$1.jpg;
Related
Say my local website folder is at /home/me/website. I want tag refs such as "/images" to point to /home/me/website/images but when hosted online I want https://example.com/images.
I tried using a base tag on each page but with or without a base tag locally "/images" is looking for it in the root of my computer (I think). Base tag only seems to work with relative links like "images".
So I'm asking how to define the root of my website locally so that "/" points to my websites folder (so I can debug) but no change when hosted online.
Thanks.
You can use ./images or ../website/images
The element is selected properly because other properties apply. There are no console errors.
I have tried:
img/hero.jpg - works when I click on link in VS Code
/img/hero.jpg - works when I click
../../hero.jpg - work when I click
../img/hero.jpg - doesn't work
the full path - works when I click
The problem is seen here. You can see that images called by the src attribute work.
Here is the file structure.
I honestly don't understand your setup / question, but I think if you understand how relative URLs work a little better you can figure it out yourself.
On your server you have your files in somewhere like,
/var/www/html/index.html
/var/www/html/css/styles.css
/var/www/html/img/background.png
On your computer you have your files somewhere like,
C:\Users\Nani\Desktop\Website\index.html
C:\Users\Nani\Desktop\Website\css\styles.css
C:\Users\Nani\Desktop\Website\img\background.png
And in your styles.css you have something like this,
body {
background-image: url('/img/background.png');
}
Starting the URL with / tells the browser to interpret it as the root directory. On a Windows PC it will be C:\ and on a Linux PC it'll be /.
However, when you access the page once it is online from a url like https://example.com, the root directory becomes https://example.com/.
Therefore, using /img/background.png will make it look for the image at https://example.com/img/background.png once it is online, but on your local machine it'll be looking for the image at C:\img\background.png
Starting the url without the slash like this, img/background.png looks for the image relative to the folder that the css file is in. So in that case online it'll look for the background here at https://example.com/css/img/background.png and on your local machine it'll look in C:\Users\Nani\Desktop\Website\css\img\background.png
In my example, the best solution would be to use ../img/background.png, that'll look up one directory relative to the css folder, and then in the img folder. That'll work consistently on both your own computer and once it is uploaded.
That should be enough to figure out what you need to do assuming that the problem is the way the url path is declared. Otherwise, the problem might be with something else. For example, it seems like you're using SCSS. Perhaps the SCSS isn't compiled on your local machine (or hasn't been in a while), but it is compiled on the live server?
It works on live server because its settings make location of index.html a root of your document (/). When you open index.html directly your root is different and images aren't loaded from correct location if you start the path with /.
Best Practice
It is best practice to use relative file paths (if possible).
When using relative file paths, your web pages will not be bound to your current base URL. All links will work on your own computer (localhost) as well as on your current public domain and your future public domains.
I had the same problem and it turns out that I wrote the path wrongly. You have to write the url based on where the css file is, not where the index file is. Because the one that reads the url is the css file. So it should look like this:
body {background-image: url('../img/background.png');}
Because your CSS and your IMG are in different folders.
I am having a simple but frustrating problem. I have a logo on my website that I want to link back to the website's homepage. If i do href="index.html" it works but I when I try to do href="/", which I believe should also work, it takes me to the literal root directory of my computer.
For example, if I have href="/" and then I click on my logo, it directs me here:
Will this be alleviated as soon as it's hosted on a server? Any insight into this behavior would be greatly appreciated.
You're correct, an href of "/" is the root of where the file is being served from, in this case your local file system.
However, I do believe that setting an href of "index.html" or "/index.html" would be slightly more optimized performance, as "/" just resolves to "index.html" anyways.
I would also suggest you set up your local environment to have a local server, where the files are served not just read by your browser. MAMP is an easy way to do this.
Yes, this is a problem that will only occur if you're viewing a site off your filesystem rather than a local or remote server.
If you'd like to prevent this anyway, you could use relative paths rather than absolute. For example:
If you're on /photos/index.html and would like your header logo to go to /, your link could be: ../ to go up one directory.
If you're on /index.html and would like your header logo to point to the current directory, your link could be: ./ to stay in the current folder level.
You can also add this option to disable directory listing and display contents of index.html
Create a .htaccess file with the following:
Options -Indexes
Or you can have this option in the <VirtualHost> directive.
What you wanted to do can be done by :
This will clear the differnce
Further Refrence
https://www.w3schools.com/tags/att_a_href.asp
https://html.com/attributes/a-href/#Different_URL_Forms
This problem was already answered
Base URL - How to call the home link
When we launch a website, we usually see webpage name (menu.php or admin.aspx) but I would like to hide that name and show only virtual path or just website name. I don't want it for the first page because I did that with default.aspx but I want to implement it for the whole website.
Showing www.abcd.com/faq/ instead of www.abcd.com/faq/faq.html
Note: My code is not MVC code and server is Apache.
Use .htaccess to rewrite the URL. Millions of tutorials are out there for that ;)
What you are asking is achieved using (for xampp, wamp, lamp or any other apache powered webserver setup) htaccess rewriterules. The rules take the URL and break it into parts that can be modified or used as variables to feed other pages - whilst still keeping the URL you typed. Neat huh!
Showing www.abcd.com/faq/ instead of www.abcd.com/faq/faq.html
call the file placed into the folder faq simply index.html (not faq.html) and then www.abcd.com/faq/
will display the page without the filename. (Make sure, you have defined index.html as a valid Directory index.)
There are more options with using mod_rewrite etc - but since you seem to use a prety static directory based navigation layout, that would be the easiest way.
This is a newbie question, I know, but I couldn't find clear answer.
My web root looks like this:
/index.html
/img
I set up subdomain img.my-domain.com, it points to /img folder
Now, in my index.html I call image located in subdomain i.e. folder img
I can do it using relative and absolute path, both are working:
src="/img/image.jpg"
src="http://img.my-domain.com/image.jpg"
My question is: is there any difference? In the context of parallel downloads concept, is the image gonna be perceived by browser as coming from subdomain in both cases?
I have a lot of images and want to serve them from 2 subdomains. However I develop locally and when the website will go online, I would have to change image links from relative to absolute in case absolute path is required.
Thanks
src="/img/image.jpg"
Will send cookies for www.my-domain.com. Won't appear as a separate domain.
src="http://img.my-domain.com/image.jpg"
Will have separate cookies. Many websites do this to improve performance.
You should real use the relative protocol so if you need SSL, you won't get warnings. src="//img.my-domain.com/image.jpg"
no there isn't but the relative path is the common way.