JS Function to load images works in local env but not when deployed

[mrerikmt]

e-snyder-portfolio.netlify.app
eriksnyder.dev

This is for a class assignment that I have due soon and I would really appreciate some help because I am stuck.

I have a JS function that points certain images to the html via a setAttribute method.

The following is an abbreviated version of the function:

HTML:

JS:
const projImg = document.getElementById(“proj-img”);
const projDesc = document.getElementById(“proj-desc”);

const pageArr = [
{
projectId: “1”,
projImg: “…/src/images/orange.png”,
projectDesc: Project One,
},
{
projectId: “2”,
projImg: “…/src/images/placeholder.png”,
projectDesc: Project Two,
}
]
let id
function showPage(n) {
let dataIndex = pageArr[n- 1];
projImg.setAttribute(“src”, dataIndex.projImg);
projDesc.innerHTML = dataIndex.projectDesc;
}
showPage(id)

All of this works just fine in local environment, but the images (6kb file size) do not load when the site is deployed. The project descriptions(projDesc) load just fine in deployed version so the problem is isolated to the images only. The rest of the function works.

I am using Parcel v2. The site builds properly in local environment.

I thought this might be a problem with the image file path so I tried a few different options but none of them worked.

All other images on the site work.

I found this discussion:

A Function works on local, but not when deployed

Hello, I am having trouble with my deployed personal project: https://quirky-swirles-9080c2.netlify.app. It is a sorting-visualizer project. The issue is: mergesort is currently breaking the web app while 4 other algorithms are working as intended. [local] I have tried and would like to debug this on my end, but I am not experiencing the same problem when it’s run on localhost using yarn start, as presented above. Upon clicking a new array button after the bug, the site logs TypeError: Can…

The above discussion is suggesting to “set the NODE_VERSION env var to the exact same version you are using locally.”

The link to the instructions on how to do this are unclear to me.

This is what I have for Environment Variables:
Key: NODE_VERSION, Value: 18.8.0

Do I need to re-deploy the site now? What is the next step? Is there something else that could be causing the problem?

Please let me know if I need to provide any additional information.

Thanks,

[coelmay]

Hi @mrerikmt

@mrerikmt

I have a JS function that points certain images to the html via a setAttribute method.

Can you specify which images? From what I see, all images are loading correctly.

@mrerikmt

The above discussion is suggesting to “set the NODE_VERSION env var to the exact same version you are using locally.”

In this instance, the function is running client-side. Setting of the NODE_VERSION is only required for building and has no impact on the running of your function.

It would appear you have enabled asset optimisation. I suggest turning this off and seeing if this makes a difference. Disable it in the UI under Site settings > Build & deploy > Post processing > Asset Optimization ( or via https://app.netlify.com/sites/e-snyder-portfolio/settings/deploys#post-processing.)

[mrerikmt]

I disabled Asset Optimization. Didn’t help.

The images that are not loading are:
orange.jpg
magenta.jpg
kodama-screen.jpg
a-j-screen.jpg
green.jpg
yellow.jpg
blue.jpg
hope-screen.jpg

I noticed that none of these images are listed in the local build log, nor are they listed in the dist folder.

Maybe this is more of an issue with Parcel v2?

It appears that the images listed in the Dist folder and Build log all have file paths specified in either the HTML or CSS files. The images that are not listed (and are loading properly) have file paths specified in a JS file (project-page.js).

Hope that makes sense. Thanks.

[coelmay]

@mrerikmt

I noticed that none of these images are listed in the local build log, nor are they listed in the dist folder.

If they aren’t in the directory that is deployed then that is the first thing to look into.

It is possible the references to the files aren’t detected by Parcel and thus aren’t copied during building. Without seeing the repository I cannot offer any insights. You might need to check out the Parcel documentation

Parcel Documentation

[mrerikmt]

Thanks for your help.

It appears that Parcel requires that image file paths referenced from JS to be referenced using some sort of URL Dependency. Looks like I will need to get that worked out.

Image

[mrerikmt]

For anyone who may run across this thread looking for a solution to this problem:

Make sure that within your script tag linking to your JS file… type=“module”.

As a variable: const img = new URL(“/src/images/yellow.jpg”, import.meta.url)

or

As an object: projImg: new URL(“/src/images/yellow.jpg”, import.meta.url),

I tried both of these options and both of them allowed the image URL to be included in the Parcel V2 build directory.

[hillary]

Thanks for coming back and sharing your updated solution-- we appreciate it! Happy building