So I am remaking a site for my company moving from our wordpress site that has been failing. I am running into issue of using any image with a relative path. I can use the absolute path to the image on the wordpress site but that's not going to last so I need to be able to use relative. I am using asp.net to create the site.
My file path is like this:
Root
|-Images
|---Image in question
|-Views
|---Home
|------Index.cshtml (This is where I want the image showing up)
In my Index file I am trying to use an image as a background so I have the following:
<style>
body{
background-image: url("/../Images/Church-Main-Homepage-Image-3.jpg");
}
</style>
So far I've tried:
/Images/Church-Main-Homepage-Image-3.jpg
../Images/Church-Main-Homepage-Image-3.jpg
../../Images/Church-Main-Homepage-Image-3.jpg
/../../Images/Church-Main-Homepage-Image-3.jpg
/../../../Images/Church-Main-Homepage-Image-3.jpg
<Application>/Images/Church-Main-Homepage-Image-3.jpg
I know I'm going a little too far with the "../" but I've been just trying different things to try and get this working. When using an absolute path for the background it works fine with no error.
Is there some special way I need to do this in asp.net that it just doesn't like these relative paths?
Update
screenshot of files
Issue turned out that I needed to have my images folder in the wwwroot folder. Thank you #thanzeel
Related
enter image description here
I am trying to make a full page background image when the site loads. The problem is, none of the images i tried wont' load.
I checked my code syntax, checked the image format, checked my path to image folder, everything seems to be fine but images still won't load.
CSS:
.header-nav-menu{
background-image: url("../project/full.jpg");
}
I am not getting any error messages so I can't figure out where is the problem.
Try referencing the image at root level. Like this:
.header-nav-menu{
background-image: url("/project/full.jpg");
}
You should also be able to check the file path with your code editor, if it redirects to the image then the path is good and syntax are good. Check if you uploaded your img correctly to the server if you are using one, otherwise put it directly at the root as said below, it can't be messing for a lot of possibilities.
You should try your browser's development tools to investigate. (F12 on Chrome). You can see if the image section is present in the page. Try using a full path, rather than a relative one to see if that gives you anything. Also it could be a permissions issue where the folder containing the images is not accessible.
.header-nav-menu {
background-image: url('full.jpg');
}
Read up on pathing: Difference between Relative path and absolute path in javascript
I have encountered an issue and I really don't know what is causing it. I am working in brackets and the site works perfectly in preview.
However, when I click on the actual index.html file my background images from my scss are missing.
Uploaded images via src are working
Rest of my sass is working
Js is working
Only the images for my backgrounds ( using url ) are not working anymore, so I presume it has something to do with the url.
An example of the scss:
.jumbfirst {
background: url('/imagini/images/background6.jpg');
background-size: cover;
width: $fullwidth;
min-height: 600px;
}
Any ideas? Thank you!
It depends on your devel setup, meaning you use relative paths but depending on the structure of your files and how you run your index.html the browser reads the paths differently.
I'm guessing that double clicking the index.html file doesn't show it from your local server but as an absolute path like
file:///Applications/XAMPP/xamppfiles/htdocs/devel/test/index.html
This example is from a MAC and it's the path to the index.html in the file system.
You should either have a local devel server (e.g. XAMPP) or if you already have one change the address in your browser to something like
http://localhost/devel/test/index.html
In this case I'm calling index.html from my local server, inside the devel/test/ directory.
Hope this helps.
It's because path relativity to your image file. When it comes to domain image shows because the path is set to current directory. But with index.html image path will be converted to something like this http://www.example.com/index.html/imagini/images/background6.jpg. Since the browser try to find image in that path image wont be found. Check your console in developer tools of chrome browser. You may get more details from there.
This might be fixed by removing starting / from your image url or creating a .htaccess with proper parameters.
Apologies if this is an idiotic question: I used the following src declaration within an img tag to display an image on a Bootstrap website in phpstorm under a laravel blade file: src="C:\Users\MAHE\Pictures\Wallpapers\photo.jpg".
The image does not display; it's just invisible because the mouse pointer is showing the hand symbol when hovered; however, the image displays perfectly when the src declaration is:
src="http://weknowyourdreamz.com/images/apple/apple-02.jpg"
The first link is pointing locally (C: drive). Are you using a localhost or displaying it locally or is it live on a server?
If your website is hosted locally:
Use a relative path, example: images/file_01.jpg
If your website is live:
Use a link to an image that is on a server, as the path is meaningless in this context.
EDIT:
(Elaboration on relative paths to give more clarity as per comment)
The location for the relative path would be wherever the file is in relation to the file that you are trying to link from, so you would need to host the file with the site in order to achieve this. The link itself would depend on your file structure, a typical link would read such as: ../images/cat_01.jpg (the preceding "/" , "./", "../" represent Root directory, current working directory, and parent directory, respectively).
This Link provides a good summary of Relative vs Absolute paths.
If you cannot achieve this then host the image wherever you can and provide the entire URL for the image. Example src="http://www.forexample.com/images/cat_01.jpg".
As you should now be able to see, this is why the second link works. Your file can actually access this image whereas the first link points to a specific location on a computer - this makes no sense in a web environment.
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.
background image is not coming from css in joomla 2.5 .
I am writing this css code for background image
background-image: url(images/abc-md.jpg);
However if i am trying on my local machine by creating a folder name website and keeping the html code and css in it ,and images are placed in a folder named images which is also kept in side website folder
Please help how i can make images to come from css whether inline or external in joomla
If you are calling background images in your CSS, then the path to the image is relative to the CSS file, not the root of your website.
If I understand things correctly, your images and CSS directories are both at the same level inside your website folder, in which case what you want is:
background-image: url(../images/abc-md.jpg);
Note the ../ in the image path.
Good luck!
Most likely the style sheet you're editing is your template's? In that case, images/abc-md.jpg would be in /templates/your_template/images/ and not in the root.
To make it simple, just add / to the URL of the image:
background-image: url(/images/abc-md.jpg);
If it still doesn't work, give it a go with firebug (or chrome dev tools) and see if the rule is picked up at all (maybe you're using the wrong css selector) and if the image can be loaded and if the container size is large enough to display it and the possibilities are endless, why don't you try the above and let us know some more, i.e. at least your site's address ?