You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Following the URL Dependencies instructions section in the above link, I am attempting, in my JS, to loop over a .json array of 'job' objects, each job object including an 'image' property, which has an .svg image as its value
The URL Constructor should be used to create the image's src it says, and gives the following example, creating the image element, then attaching its source using required the URL Constructor, then appending it to the <body>
let img = document.createElement('img');
img.src = new URL('hero.jpg', import.meta.url);
document.body.appendChild(img);
Each 'job' object's "image" property, which again I'm using to construct the src of these images, is a file path (from the .json to the .svg's file location).
So when I get to point of constructing the <img>'s src using the URL Constructor, instead of writing out a simple file string as the example shows, I'm instead using a template literal string referencing the object's "image" property (whose value again is that file path)
let logo = new Image();
logo.src = new URL(`${job.image}`,import.meta.url); <-----
When I console.log my created 'logo' , however, I see that, for its constructed 'src' attribute, the value is led by a "file:///" instead of leaving the "image" property's string value as it originally was in the object.
This "file:///" addition is indicating to the browser that the Parcel script is attempting to access a LOCAL file.. and the browser is reacting by BLOCKING access and producing an error.. "Not allowed to load local resource" which is of course preventing my job object's .svg from loading onscreen.
The console'd element <img src="file:///assets/logos/scoot.svg">
The browser error Not allowed to load local resource: file:///assets/logos/scoot.svg
How can loop over these 'job' objects and create the elements - and their src attributes - without that leading to having this browser error?
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
https://parceljs.org/languages/javascript/#url-dependencies
Following the URL Dependencies instructions section in the above link, I am attempting, in my JS, to loop over a .json array of 'job' objects, each job object including an 'image' property, which has an .svg image as its value
The URL Constructor should be used to create the image's src it says, and gives the following example, creating the image element, then attaching its source using required the URL Constructor, then appending it to the
<body>Each 'job' object's "image" property, which again I'm using to construct the src of these images, is a file path (from the .json to the .svg's file location).
So when I get to point of constructing the
<img>'s src using the URL Constructor, instead of writing out a simple file string as the example shows, I'm instead using a template literal string referencing the object's "image" property (whose value again is that file path)When I console.log my created 'logo'![]()
, however, I see that, for its constructed 'src' attribute, the value is led by a "file:///" instead of leaving the "image" property's string value as it originally was in the object.
This "file:///" addition is indicating to the browser that the Parcel script is attempting to access a LOCAL file.. and the browser is reacting by BLOCKING access and producing an error.. "Not allowed to load local resource" which is of course preventing my job object's .svg from loading onscreen.
The console'd![]()
element
<img src="file:///assets/logos/scoot.svg">The browser error
Not allowed to load local resource: file:///assets/logos/scoot.svgHow can loop over these 'job' objects and create the![]()
elements - and their src attributes - without that leading to having this browser error?
GitHub : https://github.com/nnall/FEM__Devjobs.git
Beta Was this translation helpful? Give feedback.
All reactions