Very new to this so sorry if this is dumb.
I'm trying to display images on a web page. The images show up fine, but when I update or make changes to the image, the older version persists. So, for example, I load an image, decide to swap it out for another one, remove the old image from my image folder, add the new one, but the old version of the image is what continues to show. I've found that if I rename the image I can get it to change, but I don't want to keep renaming my images "Icon4", "Icon7", etc. as that gets messy.
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="/static/img/cv_icon.png" alt="">
</div>
</div>
It's due to browser cache. Try adding a random number to the image url.
I assume your page is in php:
<img src="/static/img/cv_icon.png?rand=<?php echo rand(); ?>" />
If I'm right, what you're saying is that you change the content of the image(update the image) and when you check the website, it remains the same?
Well, what could be happening is that your browser might be saving it in cache memory so as long as it seems to be the same to the computer, it won't change anything. What you'll do is to delete your cache memory.
Related
I have 2 images in html, one is shown, but the second one is not, I have tried to put another different image in the second one but it is still not shown. Both are in the same path.
<a class="navbar-brand" href="#">
<img id="borderIcono" th:src="#{/images/icono_prueba.png}" width="60" height="60" alt=""/></a>
<button ng-click="cargando = true" ng-disabled="cargando">
<img th:src="#{/images/redo.png}" class="redoBoton"/>
</button>
I have also tried to put the second image outside the button and without the class attribute, but it is still not displayed. So the css is not the problem.
I have tried to interchange them and the first one is seen where the second one is but the second one is still not seen in the place of the first one.
In inspect the browser tells me that the image could not be loaded.
I know that both images are in the same folder, so both should be accessible.
I found the bug, the server was not putting the image inside the compiled application, that is, I put the file in the source folder, but when I run it, it reads whatever is in the target folder.
I am updating my online portfolio with a new website (I grabbed a template off Free-Css.com). When I preview it, it works fine. Once I deploy the website via Firebase, none of my images appear.
All of the images are in the public folder, which is where my hosting is set to. Here is an example of one of the images:
<div class="col-md-6 about-img-div">
<!-- <div class="about-border" data-aos="fade-up" data-aos-delay=".5"></div> -->
<img src="Headshot.jpg" width="400" class="img-responsive" alt="" align="right" data-aos="fade-right" data-aos-delay="0" />
Even if I use the pull pathname, the images still do not appear. Please note that they do appear if I just open the HTML file, but not while deployed. What am I doing wrong? Here is the website: https://evanmny.com
I'm not sure how you create/generate the HTML, but when I look at the network tab when loading your site in a browser I see it tries to read this URL:
https://evanmny.com/Users/evanmullen/Public/city.jpg
That should be:
https://evanmny.com/city.jpg
I am a beginner with regards to CSS and HTML but have searched everywhere for a solution to this and still have no idea what is going on.
I am attempting to create a background image with a logo/subtitle on top of it. Although only the subtitle and alt text is showing up. I have gone over the syntax multiple times and am still unsure of where the error is as I am declaring the correct css specifications from what I can tell.
#HTML:
<div class="blog-type-wrapper">
<div class="blog-type-img-background" style="background-image:url(images/software.jpg)"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/software-logo.png" alt="soft">
</div>
<div class="subtitle">
Software N Stuff
</div>
</div>
</div>
#CSS
.blog-type-img-background{
height:500px;
width:100%;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
There is space on the web page allocated to the image, however no images appear. The images are in another folder named "images" in the same directory as both the html and css files. This is occurring in a PHP file, I have attempted researching if that makes a difference in comparison to HTML file, and have found nothing but I cannot see how it would make a difference with regards to this issue.
Edit
The file path was incorrect. Thank you to #Heretic Monkey and others
"Look at the Networking tab of your browser's developer tools and look for any errors, like a 404 with the image's file name. That will show the full URL to the image it's trying to load. It's likely incorrect, relative to the HTML file. Fix that"
After looking in the networking tab I realized that my file path was incorrect and changing it to style="background-image:url(wp-content/themes/my-theme/images/software.jpg)"> worked in loading the image as expected.
Change
style="background-image:url(images/software-logo.png)"
to
style="background-image: url('images/software-logo.png');"
Also, depending on where your images folder is located, you might need a / before, like this: /images/software-logo.png.
The result would be this:
<div class="blog-type-wrapper">
<div class="blog-type-img-background" style="background-image: url('images/software-logo.png');"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/software-logo.png" alt="soft">
</div>
<div class="subtitle">
Software N Stuff
</div>
</div>
</div>
Source should contain either /, ./, or ../:
In case the image folder is in the absolute root path, you should use /images/image.png
If it's in the same directory as the current file's location, then use ./images/image.png
If it's in an upper folder, use ../images/image.png
Hello I'm new to web design,
I used twitters bootstrap to create a website. Everytime I try to load http://www.taekwondo.uwcs.co.uk/gallery.php on mobile (ios) the browser crashes (chrome) or runs very slowly on that page.
I was wondering how could I fix this issue (how to debug it). Do I have too many images on the page? Do I need to lower the quality of the images?
I'm using lazy loading the images using this plugin (http://www.appelsiini.net/projects/lazyload). Here is the html I have there are about 8 rows of images.
<div class="row">
<div class="col-md-3">
<img class="img-responsive " src="images/load.gif" data-original="images/gallery/freshers/29.jpg" alt="">
</div>
<div class="col-md-3">
<img class="img-responsive " src="images/load.gif" data-original="images/gallery/freshers/30.jpg" alt="">
</div>
<div class="col-md-3">
<img class="img-responsive " src="images/load.gif" data-original="images/gallery/freshers/31.jpg" alt="">
</div>
</div> <!-- End of row -->
jQuery on the page
$(".img-responsive").lazyload();
Thanks in advance
The problem is that you load all the images at once because they are all in the viewport of the user if he opens the page. You should only load images which are currently visible for the user.
For that you can add a min-height (this is not the best solution for responsive websites) to your rows (e.g. min-height: 50px). A better solution is to load the first and maybe second row without lazy loading. The rest of the rows can be lazy loaded. Then the performance problem should be solved ;)
The second thing is, that I wouldn't use a jQuery plugin, because for a such tiny functionality like lazy loading you don't need such a big library which costs performance too.
I prefer a lightweight and more efficient plugin like justlazy. In the example you can see, that images are only loaded, if they are visible for the user. If you load your site, all images are loaded.
You can use justlazy as follows:
1. Define a placeholder:
<span data-src="path/to/image" data-alt="some alt text"
class="justlazy-placeholder">
</span>
Good at this solution is also that google don't index your load-gifs. If you want to seo optimize it, you can use an img with a small image as src-attribute instead of the span for the placeholder.
2. Register lazy loading via javascript
Justlazy.registerLazyLoadByClass("css-class");
When I run it locally, it works fine! But it isn't working when I upload it to my host and try it out online.
here's the code I'm using:
<div class="group">
<div class="left">
<img src="img/up.png" onmouseover="this.src='img/upscroll.png'" onmouseout="this.src='img/up.png'"alt="" />
</div>
<div class="middle">
<img src="img/hobo.png" onmouseover="this.src='img/hoboscroll.png'" onmouseout="this.src='img/hobo.png'"alt="" />
</div>
<div class="right">
<img src="img/blamealcohol.png" onmouseover="this.src='img/blamealcoholscroll.png'" onmouseout="this.src='img/blamealcohol.png'"alt="" />
</div>
Ok, editing answer with a different solution altogether.
Maybe this would do what you are looking for but be a little more simple than the mouseover events.
Here's the demo http://jsfiddle.net/xxhpxd98/
<img class="clock" src="http://images.cdbaby.name/6/0/60x60music2_small.jpg" height="60px" width="60px">
<img class="briefcase" src="http://www.globetrotter1897.com/wp-content/uploads/2013/06/Burgundy-Flight-Bag-and-Small-Brief-60x60.jpg">
.clock {
position:absolute;
z-index:2;
}
.clock:hover {
opacity:0
}
.briefcase {
position:absolute;
}
If the path of the hover image is correct then the problem is something else.
Usually when a page is loaded it loads everything which is present in it in the first view. i.e it will not load any images which is put in the javascript events such as onmouseover. And the mouseover image starts loading only when you do the action (i.e mouseover). And sometime it may fail if the hover image is not cached or if the image couldn't be fetched from server.
There are different ways to solve this problem.
Here are two:
1) First method:You should preload the hover image using javascript
var image1=new Image();
image1.src="img/upscroll.png";
by this method the image upscroll.png will get cached and thus your code works fine.
2) Second method:Include all the hover images in the page and set its width and height to 1 px so that no one will see it but the image will be preloaded. If required you can change the position of these dots to fixed and keep it out of the screen at left:-10px or something like that.
This not only makes the code work fine but also it will avoid the weird appearance of the image getting loaded while mouse is over as it is already cached.