How do I update an image without manual refresh?

[Guest]

How can I get an asp:Image to refresh when a user uploads a different jpg.

I disabled caching using this command on Page_Load():
Response.Cache.SetCacheability(HttpCacheability.No Cache);
but it didn't help.


The problem is that this page does not change images after a client uploads
a new one. If I hit the browser's refresh, then I can see the updated image,
but if I don't refresh, then I see the previous image.


The code to change the image is this simple: imgControl.ImageUrl =
"http://imagePath.jpg";

The new image does have the same name as the old image, but why should this
matter? If the browser is caching then why does it work using a refresh,
wouldn't it still use the image from the cache?

 

[Eliyahu Goldin]

You can trick the browser into getting the image from the server rather than
from the cache by adding a random query parameter to the image source.

I use the following javascript code to generate random numbers:

function random(){

return (new Date()).getMilliseconds();

}

 

[Mark E. Hansen]

How can I get an asp:Image to refresh when a user uploads a different jpg.

I disabled caching using this command on Page_Load():
Response.Cache.SetCacheability(HttpCacheability.No Cache);
but it didn't help.

To understand the problem, we need to think back to when this image was
initially sent to the client browser. At that time, it was sent with an
expiration date/time which was probably pretty for into the future. This
is to allow the client to cache the image, so it won't have to keep pulling
it down over the wire.

So, even if you change the expiration for the image, the client still has
the original expiration, and won't even try to get a new copy of the image
until the expiration time expires, or the client's cache is flushed.

However, there are a couple easy work arounds for this. The one I prefer
is to simply change the name of the image file (as well as the reference
to the file in your generated HTML page). The client's cache is based on
the name of the resource, and if that name changes, such that the client
doesn't already have it in its cache, it will download it.

Of course, to allow the client to cache the content when possible, you only
want to change the name of the file when the image really changes.

The problem is that this page does not change images after a client uploads
a new one. If I hit the browser's refresh, then I can see the updated image,
but if I don't refresh, then I see the previous image.


The code to change the image is this simple: imgControl.ImageUrl =
"http://imagePath.jpg";

The new image does have the same name as the old image, but why should this
matter?

Let me know if you still don't see why...

If the browser is caching then why does it work using a refresh,
wouldn't it still use the image from the cache?

As you've seen, when you issue a refresh, it causes the client to bypass
its cache. This is client specific, but I think most browsers do this.

 

[Guest]

Mark,

I don't want to change the name of my image. What was your other work around?

Thanks for the response.

 

[Guest]

Eliyahu,

Not sure what you mean here? What happens when the client executes that JAVA
script?

--
Jerry J

You can trick the browser into getting the image from the server rather than
from the cache by adding a random query parameter to the image source.

I use the following javascript code to generate random numbers:

function random(){

return (new Date()).getMilliseconds();

}


--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP [ASP.NET]

How can I get an asp:Image to refresh when a user uploads a different jpg.

I disabled caching using this command on Page_Load():
Response.Cache.SetCacheability(HttpCacheability.No Cache);
but it didn't help.


The problem is that this page does not change images after a client
uploads
a new one. If I hit the browser's refresh, then I can see the updated
image,
but if I don't refresh, then I see the previous image.


The code to change the image is this simple: imgControl.ImageUrl =
"http://imagePath.jpg";

The new image does have the same name as the old image, but why should
this
matter? If the browser is caching then why does it work using a refresh,
wouldn't it still use the image from the cache?

 

[Mark E. Hansen]

Mark,

I don't want to change the name of my image. What was your other work around?

You can add parameters on to the end of the url. For example, if you're
image is accessed as http://mysite/images/myimage.jpg, you can change
it to be http://mysite/images/myimage.jpg?my-random-value

You can change the random value anytime you want the clients to bypass
the cache a fetch a new version of the image.

 

[Eliyahu Goldin]

The browser will think it is a different image and will get it from the
server.

It doesn't have to be in javascript. If you do it on server side, you can
use the Random class for generating random numbers and adding them to the
image url.

imgControl.ImageUrl = "http://imagePath.jpg?" +
myFunctionThatGetsRandomString();

--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP [ASP.NET]

Eliyahu,

Not sure what you mean here? What happens when the client executes that
JAVA
script?

--
Jerry J

You can trick the browser into getting the image from the server rather
than
from the cache by adding a random query parameter to the image source.

I use the following javascript code to generate random numbers:

function random(){

return (new Date()).getMilliseconds();

}


--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP [ASP.NET]

How can I get an asp:Image to refresh when a user uploads a different
jpg.

I disabled caching using this command on Page_Load():
Response.Cache.SetCacheability(HttpCacheability.No Cache);
but it didn't help.


The problem is that this page does not change images after a client
uploads
a new one. If I hit the browser's refresh, then I can see the updated
image,
but if I don't refresh, then I see the previous image.


The code to change the image is this simple: imgControl.ImageUrl =
"http://imagePath.jpg";

The new image does have the same name as the old image, but why should
this
matter? If the browser is caching then why does it work using a
refresh,
wouldn't it still use the image from the cache?

 

[Guest]

Oh, I understand, like this ->
"http://imagePath.jpg?somethinghere=differentValueEveryTime"

I will try that!

--
Jerry J

You can trick the browser into getting the image from the server rather than
from the cache by adding a random query parameter to the image source.

I use the following javascript code to generate random numbers:

function random(){

return (new Date()).getMilliseconds();

}


--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP [ASP.NET]

How can I get an asp:Image to refresh when a user uploads a different jpg.

I disabled caching using this command on Page_Load():
Response.Cache.SetCacheability(HttpCacheability.No Cache);
but it didn't help.


The problem is that this page does not change images after a client
uploads
a new one. If I hit the browser's refresh, then I can see the updated
image,
but if I don't refresh, then I see the previous image.


The code to change the image is this simple: imgControl.ImageUrl =
"http://imagePath.jpg";

The new image does have the same name as the old image, but why should
this
matter? If the browser is caching then why does it work using a refresh,
wouldn't it still use the image from the cache?

 

[Guest]

This works, thank you!

--
Jerry J

You can add parameters on to the end of the url. For example, if you're
image is accessed as http://mysite/images/myimage.jpg, you can change
it to be http://mysite/images/myimage.jpg?my-random-value

You can change the random value anytime you want the clients to bypass
the cache a fetch a new version of the image.

 

[Guest]

This works thank you!
--
Jerry J

The browser will think it is a different image and will get it from the
server.

It doesn't have to be in javascript. If you do it on server side, you can
use the Random class for generating random numbers and adding them to the
image url.

imgControl.ImageUrl = "http://imagePath.jpg?" +
myFunctionThatGetsRandomString();

--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP [ASP.NET]

Eliyahu,

Not sure what you mean here? What happens when the client executes that
JAVA
script?

--
Jerry J

You can trick the browser into getting the image from the server rather
than
from the cache by adding a random query parameter to the image source.

I use the following javascript code to generate random numbers:

function random(){

return (new Date()).getMilliseconds();

}


--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP [ASP.NET]



How can I get an asp:Image to refresh when a user uploads a different
jpg.

I disabled caching using this command on Page_Load():
Response.Cache.SetCacheability(HttpCacheability.No Cache);
but it didn't help.


The problem is that this page does not change images after a client
uploads
a new one. If I hit the browser's refresh, then I can see the updated
image,
but if I don't refresh, then I see the previous image.


The code to change the image is this simple: imgControl.ImageUrl =
"http://imagePath.jpg";

The new image does have the same name as the old image, but why should
this
matter? If the browser is caching then why does it work using a
refresh,
wouldn't it still use the image from the cache?

 

[Mark E. Hansen]

This works, thank you!

Please keep in mind that if you use a unique value each time the image is
accessed, you effectively defeat the cache mechanism on the client, which
can be a serious performance issue.

You really want to change the URL for the image *only* when the content
of the image actually changes. This way, the client can continue to
cache the image when it doesn't change.

 

[Guest]

good advise. Thank you.
--
Jerry J

Please keep in mind that if you use a unique value each time the image is
accessed, you effectively defeat the cache mechanism on the client, which
can be a serious performance issue.

You really want to change the URL for the image *only* when the content
of the image actually changes. This way, the client can continue to
cache the image when it doesn't change.