When attempting to assign the returned URL field of a JSON object retrieved from the NASA APOD API to a HTMLImageElement src property I receive a GET error. The error shows that the GET request appends a local file path before the external URL path.
Console logged as:
GET file:///C:/Users/username/OneDrive/Documents/Coding/NASA-POTD/Image%20of%20the%20day%20https://apod.nasa.gov/apod/image/2010/RhoAntares_Abolfath_1080.jpg net::ERR_FILE_NOT_FOUND
You can inspect my code below.
const sourceImg = document.getElementById('img');
const DATE = '&date=2020-10-14'
const RESOURCE = `https://api.nasa.gov/planetary/apod?api_key=hDhaSTsRNtw5sjymgxbwQDAfLGb7mDXcgxctq7xI${DATE}`;
fetch(RESOURCE)
.then(res => {
if (!res.ok) {
errorReturned = true;
throw new Error('error')
};
let reqBody = res.text();
return reqBody
})
.then(reqBody => {
let receivedRes = JSON.parse(reqBody)
sourceImg.src = `Image of the day ${'https://apod.nasa.gov/apod/image/2010/RhoAntares_Abolfath_1080.jpg'}`
})
If anyone could help with the semantics of my question, I am a noob who doens't quite know how to word the question to understand the issue.
By a serendiptous rewrite of the code I realize that you cannot have the HTMLImageElement.src property be set to a template literal.
Fixed with this:
sourceImg.src = 'https://apod.nasa.gov/apod/image/2010/RhoAntares_Abolfath_1080.jpg';