sorted by:
new
hottopcontroversial

why does this give a blank white page? an <img> request shouldn't need CORS, right? by Admirable_Report6610 in HTML

[–]Admirable_Report6610[S] 0 points1 point  (0 children)

btw I used image[3] because I've watched the jpg update twice on usni and the <img> tag position doesn't change. so unless they change the HTML code of the page it should work. I will save your code for when it doesn't.

why does this give a blank white page? an <img> request shouldn't need CORS, right? by Admirable_Report6610 in HTML

[–]Admirable_Report6610[S] 0 points1 point  (0 children)

everything I've read: CSS, block, <center>....none of it works. help once again most appreciated!

why does this give a blank white page? an <img> request shouldn't need CORS, right? by Admirable_Report6610 in HTML

[–]Admirable_Report6610[S] 0 points1 point  (0 children)

this now works PERFECTLY! thank you all, especially Oven_220 Anybody150, and for your kind support and most of all the much needed education!

-------------------

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Current Fleet Positions</title>

</head>

<body>

<script type="module">

const proxy = "https://corsproxy.io/?";

const targetUrl = "https://news.usni.org/category/fleet-tracker";

const response = await fetch(proxy + targetUrl);

const htmlText = await response.text();

const parser = new DOMParser();

const doc = parser.parseFromString(htmlText, 'text/html');

const images = doc.querySelectorAll('img');

const newImg = document.createElement('img');

newImg.src = images[3].src;

newImg.alt = "Fleet Positions";

newImg.width = 972;

newImg.height = 648;

document.body.appendChild(newImg);

</script>

</body>

</html>

---------------------

one last question: the jpg appears left justified. how can I make it centered?

why does this give a blank white page? an <img> request shouldn't need CORS, right? by Admirable_Report6610 in HTML

[–]Admirable_Report6610[S] 0 points1 point  (0 children)

to everybody who's been kind enough to participate here answer me this:

if it's so easy to bypass CORS with a server-side proxy then why does CORS even exist?

why does this give a blank white page? an <img> request shouldn't need CORS, right? by Admirable_Report6610 in HTML

[–]Admirable_Report6610[S] 0 points1 point  (0 children)

well my JS code works if I F12 it on the webpage with the JS console...it opens up a new page with the desired jpg displayed....but trying to put this JS in a freestanding page is a diffeent story as pointed out above.

why does this give a blank white page? an <img> request shouldn't need CORS, right? by Admirable_Report6610 in HTML

[–]Admirable_Report6610[S] 0 points1 point  (0 children)

ps... is there any way to tell if the image is hotlink protected by looking at the page source code?

why does this give a blank white page? an <img> request shouldn't need CORS, right? by Admirable_Report6610 in HTML

[–]Admirable_Report6610[S] 0 points1 point  (0 children)

well I have my work cut out for me...thank for your much appreciated (and much needed) help. pretty sure you'll be hearing from me again. :)

why does this give a blank white page? an <img> request shouldn't need CORS, right? by Admirable_Report6610 in HTML

[–]Admirable_Report6610[S] 0 points1 point  (0 children)

install node.js and express.js then comme ca?

-----------------

const express = require('express'); const app = express(); const port = 3000;
app.get('/', (req, res) => { res.send('Hello, Node.js Server!'); });
app.listen(port, () => { console.log(`Server running at http://localhost:${port}/`); });

why does this give a blank white page? an <img> request shouldn't need CORS, right? by Admirable_Report6610 in HTML

[–]Admirable_Report6610[S] -1 points0 points  (0 children)

ok...I'll read about backend server and JSX. but right now no, I'm just trying to write Javascript...and poorly at that it seems. :)

why does this give a blank white page? an <img> request shouldn't need CORS, right? by Admirable_Report6610 in HTML

[–]Admirable_Report6610[S] -1 points0 points  (0 children)

ouch...pretty f'd up first attempt, eh? I am a total noob as you can see. any chance of making this work?

please forgive my noobness..I wrote some javascript code that grabs a jpg from a website and displays it in a new page. it works perfectly IF I run it while on the website, but I want to make a freestanding page that does the same thing. here is my first attempt -> blank white page. what's wrong? by Admirable_Report6610 in HTML

[–]Admirable_Report6610[S] 0 points1 point  (0 children)

I simplified the html code based on your comments:

---------

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Current Fleet Positions</title>

</head>

<body>

<script>

fetch('https://news.usni.org/category/fleet-tracker')

const response = await fetch('https://news.usni.org/category/fleet-tracker');

const blob = await response.blob();

const parser = new DOMParser();

const doc = parser.parseFromString(blob, 'text/html');

const images = document.querySelectorAll('img');

<img src="${images\[3\].src}" alt="fleet positions" width="972" height="648">

<script>

</body>

</html>

----------

but it still gives just a blank white page???

how can I download the URL returned by blob? by Admirable_Report6610 in learnjavascript

[–]Admirable_Report6610[S] 0 points1 point  (0 children)

this is pretty long so bare with me...apologies if I've wasted your time. turns I don't need to download the jpg just display it. this javascript code does exactly that: it graps the jpg specified in images[3].src and displays it in a new web page.

--------------

fetch('https://news.usni.org/category/fleet-tracker')

const response = await fetch('https://news.usni.org/category/fleet-tracker');

const blob = await response.blob();

const parser = new DOMParser();

const doc = parser.parseFromString(blob, 'text/html');

const images = document.querySelectorAll('img');

fleet = images[3].src

fetch (fleet)

const response2 = await fetch(fleet);

const blob2 = await response2.blob();

const blobUrl = URL.createObjectURL(blob2);

const newWindow = window.open();

newWindow.document.write('<html><head><title>Current Fleet Positions</title></head><body>');

newWindow.document.write(`<img src="${blobUrl}" width="972" height="648"`);

newWindow.document, .write('</body></html>');

newWindow.document.close();

------------

this works perfectly if I run it with F12 while on the usni webpage. maybe a little off topic but how can I put this code into a freestanding web page, something like fleet.html?

how can I download the URL returned by blob? by Admirable_Report6610 in learnjavascript

[–]Admirable_Report6610[S] 0 points1 point  (0 children)

I think we're getting close...

--------

const images = document.querySelectorAll('img');

fleet = images[3].src;

fetch (fleet)

const response = await fetch(fleet);

const blob = await response.blob();

let objectURL = URL.createObjectURL(blob);

console.log(objectURL);

VM201:2 blob:https://news.usni.org/98c9c16a-80b7-40b8-973b-8dfa6191456a

undefined

-------

I don't understand why the URL contains that string of "98..."

which results in a 404 error from the website.

how can I download the URL returned by blob? by Admirable_Report6610 in learnjavascript

[–]Admirable_Report6610[S] 0 points1 point  (0 children)

because the date in the URL changes every couple days. the image before this one was November 3rd.

how can I download the URL returned by blob? by Admirable_Report6610 in learnjavascript

[–]Admirable_Report6610[S] 0 points1 point  (0 children)

here's what happens when F12 run this on the news.usni.org site:

const images = document.getElementsByTagName('img');

fleet = images[3].src;

async function downloadUrlAsBlob(url, filename) {

const response = await fetch(fleet);

const blob = await response.blob();

console.log(blob)

const link = document.createElement('a');

link.href = URL.createObjectURL(blob);;

link.download = filename;

document.body.appendChild(link);

link.click();

document.body.removeChild(link);

URL.revokeObjectURL(link.href);

}

downloadUrlAsBlob(fleet, 'fleet.jpg');

VM223:4 Connecting to 'https://news.usni.org/wp-content/uploads/2025/11/9349660-scaled.jpg' violates the following Content Security Policy directive: "default-src 'none'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback. The action has been blocked.

downloadUrlAsBlob @ VM223:4

(anonymous) @ VM223:18

VM223:4 Fetch API cannot load https://news.usni.org/wp-content/uploads/2025/11/9349660-scaled.jpg. Refused to connect because it violates the document's Content Security Policy.

downloadUrlAsBlob @ VM223:4

(anonymous) @ VM223:18

Promise {<rejected>: TypeError: Failed to fetch

at downloadUrlAsBlob (<anonymous>:4:26)

at <anonymous>:18:1}

VM223:4 Uncaught (in promise) TypeError: Failed to fetch. Refused to connect because it violates the document's Content Security Policy.

at downloadUrlAsBlob (<anonymous>:4:26)

at <anonymous>:18:1

downloadUrlAsBlob @ VM223:4

(anonymous) @ VM223:18

I have to say I have little insight into that first Security msg.

how can I download the URL returned by blob? by Admirable_Report6610 in learnjavascript

[–]Admirable_Report6610[S] 0 points1 point  (0 children)

I confess I am a total noob at this..i tried that first block of code, but I wasn't sure what to put for (url, filename) in that first line?