Topic: Inserting jpg image problem

[mickopla]

Hi
I'm trying to add this image http://waterfordweather.ddns.net:8080/images/live.jpg

To this page https://waterfordcityweather.com/wxwebcam.php

I have tried the normal <img src= method but when i load the page no image appears.

Any help here would be great.

[PaulMy]

Hi,
While not centred like the two other images above it, it seems to be displaying fine and updating.


Enjoy,
Paul

[mickopla]

Hi,
While not centred like the two other images above it, it seems to be displaying fine and updating.


Enjoy,
Paul

That is a different webcam pointing in the same direction. I want to discontinue the image at the bottom and replace it with the better quality one here http://waterfordweather.ddns.net:8080/images/live.jpg

[the beteljuice]

Your existing cam is referenced in TWO places.

1/ In the holding <element>

2/ In the immediately following 'refresh' javascript.

Make sure you amend the url in both places.

As an aside ... the holding element (and the script) has three <center> but no closures ?

[mickopla]

Your existing cam is referenced in TWO places.

1/ In the holding <element>

2/ In the immediately following 'refresh' javascript.

Make sure you amend the url in both places.

As an aside ... the holding element (and the script) has three <center> but no closures ?

Thanks for the reply

Yes you are right that the cam is listed in two places when it doesn't need to be. How would you clean up the lack of closures and three center issue?

When the urls are amended with http://waterfordweather.ddns.net:8080/images/live.jpg i just get a blank image. It won't display on the page for some reason. Thats my main issue.

[davidefa]

By default browsers do not allow 'mixed content'  ( 'http' resources in 'https' pages ).
You can enable mixed content in your browser ( even if it is a security risk ) but visitors ( who have mixed content disabled ) will not visualize the page correctly

[saratogaWX]

The browser is causing the issue.  When you main page is loaded using HTTPS, then all other parts (CSS, images, etc) must also be loaded by HTTPS -- an HTTP only image will not display (due to the mixed secure/non-secure content).  You'll need to get a SSL certificate for waterfordweather.ddns.net in order to display the image, and it will have to be https://waterfordweather.ddns.net:8080/images/live.jpg  to work on your page.

[the beteljuice]

... and when you've done that ...

Html cleaned up / modified.

Script rewritten to update all images with the classname 'refresh' 

Code: [Select]

<div align="center"> <!-- cams container -->
<p> Webcam Waterford City Suburbs Looking East</p>
<p> Credit to TII For Kilmacthomas/Dungarvan Road Cams</p>
<div align="center">
<img class="lb-image refresh" src="https://cdn.mtcc.ie/static/cctv/0286.jpg" style="display: inline;">
<img class="lb-image refresh" src="https://cdn.mtcc.ie/static/cctv/0330.jpg" style="display: inline;">

<p> My fantastic webcam ...</p>
<img src="http://waterfordweather.ddns.net:8080/images/live.jpg" class="refresh" style= " /* width: 640px; height; 480px; */ border: 2px solid black">

<SCRIPT language="JavaScript" type="text/javascript">
<!--
 var t = 10; // interval in seconds
 var x = document.getElementsByClassName("refresh");  
 var cam = setInterval( function() {
tmp = new Date();
tmp = "?"+tmp.getTime()
for(y = 0; y < x.length; y++) {
z = x[y].src.split('?');
x[y].src = z[0]+tmp;
}
}, t * 1000);
// -->
</SCRIPT>
</div>
</div> <!-- END cams container -->


<footer>

[the beteljuice]

OK ....

Some down and dirty code that should work 

Edit: Useless code suggestion removed !

[mickopla]

Thanks and much appreciated. Will get down to using the code later.

[mickopla]

OK ....

Some down and dirty code that should work 

html / javascript:

Code: [Select]

<div align="center"> <!-- cams container -->
<p> Webcam Waterford City Suburbs Looking East</p>
<p> Credit to TII For Kilmacthomas/Dungarvan Road Cams</p>
<div align="center">
<img class="lb-image refresh" src="https://cdn.mtcc.ie/static/cctv/0286.jpg" style="display: inline;">
<img class="lb-image refresh" src="https://cdn.mtcc.ie/static/cctv/0330.jpg" style="display: inline;">

<p> My fantastic webcam ...</p>
<img src="webcam.jpg" class="refresh" style= " /* width: 640px; height; 480px; */ border: 2px solid black">

<?php include('camfetch.php'); ?>

<SCRIPT language="JavaScript" type="text/javascript">
<!--
 var t = 10; // interval in seconds
 var x = document.getElementsByClassName("refresh");  
 var cam = setInterval( function() {
    let response =  fetch('camfetch.php');
tmp = new Date();
tmp = "?"+tmp.getTime()
for(y = 0; y < x.length; y++) {
z = x[y].src.split('?');
x[y].src = z[0]+tmp;
}
}, t * 1000);
// -->
</SCRIPT>
</div>
</div> <!-- END cams container -->


<footer>
NEW php file - camfetch.php

Code: [Select]

<?php
ini_set('display_startup_errors',1);
ini_set('display_errors',1);
error_reporting(-1);
$bert = time();
copy("http://waterfordweather.ddns.net:8080/images/live.jpg?t=".time(),"webcam.jpg");
echo "<!-- cam copied -->";
exit;
?>
Note: There will be an initial update delay for your cam on page load.

Edit: Additional php include added, and php slightly modified

... I haven't posted this code 

This to be implemented after i https the image which isn't https??

[the beteljuice]

NO - this should work in the current circumstances !

[mickopla]

NO - this should work in the current circumstances !

Thats what i was thinking but it seems to be not working after updating the code..https://waterfordcityweather.com/wxwebcam.php

[the beteljuice]

Hmm ...

failed to open stream: Connection refused

Didn't foresee that - I'll PM you with something naughty to try ....

[mickopla]

Hmm ...

failed to open stream: Connection refused

Didn't foresee that - I'll PM you with something naughty to try ....

Haha thanks in advance

[the beteljuice]

General info update.

It's a 'litespeed' secure server .... the beteljuice doesn't want to get further blackhat and bows out 

[ScarletWare]

Integrating images can be tricky sometimes. I remember a similar situation when I was trying to embed a live webcam feed onto my website. It turned out the issue was with the image size and loading speed. Have you considered giving the image a gentle jpg compress? It might help with loading and display issues. Hope this tip helps you get that webcam up.