Images cause build fail

Hello! im having an issue with deploying my site on netlify. on the netlify enviorment i am getting a:

3:30:14 PM: failed Building production JavaScript and CSS bundles - 37.321s

3:30:14 PM: error Generating JavaScript bundles failed

3:30:14 PM: Can't resolve '../../../images/inside-shop-dark.jpg' in 
'/opt/build/repo/src/pages/style/Index'

3:30:14 PM: If you're trying to use a package make sure that '../../../images/inside-shop- 
dark.jpg' is installed. If you're trying to use a local file make sure that the path is correct.

or a few images but the paths are correct and everything works locally and it builds locally no problem but i cant seem to get a successful build with netlify.

Hi, @Germs31, would you please send us a link to the build logs? For example, a link like the one below:

https://app.netlify.com/sites/tender-wilson-2c063d/deploys/5f06a489322f0b71112e7f9b

My best guess is that there is a difference in letter case in some reference to this file.

For example:

../../../images/inside-shop-dark.jpg in /opt/build/repo/src/pages/style/Index is this file:

/opt/build/repo/src/images/inside-shop-dark.jpg

The first part of that path is the base of the repo (where it is cloned to) on the build system. So let’s just ignore this part:

/opt/build/repo

So, were are looking for in this repo:

./src/images/inside-shop-dark.jpg

Here is the issue I suspect you are experiencing:

  • The letter case of the file on the disk differs from the letter case in the site code.

For example, if the location on disk is actually this (with a upper-case letter “I” in “Images”):

./src/Images/inside-shop-dark.jpg

On MacOS, this will work. Images and images are the same. On Linux (the build system uses Linux), this these are two different directories and will generate an error.

Here is a quick example on MacOS:

$ echo "there is only one file" > Example.txt
$ cat Example.txt
there is only one file
$ cat example.txt
there is only one file
$ ls -l *
-rw-r--r--  1 luke  staff  52 Jul 22 22:31 Example.txt

This shows that there is a single file but you can get the contents with both Example.txt and example.txt on MacOS.

However, on Linux you get an error with example.txt:

$ echo "there is only one file" > Example.txt
$ cat Example.txt
there is only one file
$ cat example.txt
cat: example.txt: No such file or directory
$ ls -l
total 4
-rw-rw-r-- 1 luke luke 52 Jul 23 05:32 Example.txt

To summarize, please check for case sensitivity issue and, if that doesn’t resolve, a link to the build would be helpful.

Thank you so much for replying. I don’t think that is a case sensitivity issue. I kept constantly checking to make sure but maybe I am missing something. I have other images on the site and they all seem to work fine except these. these pictures i actually took myself and resized because i thought it was the culprit. i also did a clear cache and redeployed. im totally stumped. but heres the link.

https://app.netlify.com/sites/unruffled-cray-03aa2c/deploys/5f19dca1994cce99dc6afed2

hey @Germs31,

I feel very sure that this:

11:55:04 AM: Can't resolve '../../../images/inside-shop-dark.jpg' in '/opt/build/repo/src/pages/style/Index'
11:55:04 AM: If you're trying to use a package make sure that '../../../images/inside-shop-dark.jpg' is installed. If you're trying to use a local file make sure that the path is correct.
11:55:04 AM: error Generating JavaScript bundles failed
11:55:04 AM: Can't resolve '../images/back-shop.jpg' in '/opt/build/repo/src/pages'
11:55:04 AM: If you're trying to use a package make sure that '../images/back-shop.jpg' is installed. If you're trying to use a local file make sure that the path is correct.
11:55:04 AM: error Generating JavaScript bundles failed
11:55:04 AM: Can't resolve '../images/el-co-damage.jpg' in '/opt/build/repo/src/pages'
11:55:04 AM: If you're trying to use a package make sure that '../images/el-co-damage.jpg' is installed. If you're trying to use a local file make sure that the path is correct.
11:55:04 AM: error Generating JavaScript bundles failed
11:55:04 AM: Can't resolve '../images/spray-room-back.jpg' in '/opt/build/repo/src/pages'
11:55:04 AM: If you're trying to use a package make sure that '../images/spray-room-back.jpg' is installed. If you're trying to use a local file make sure that the path is correct.
11:55:04 AM: error Generating JavaScript bundles failed
11:55:04 AM: Can't resolve '../../../images/inside-shop-dark.jpg' in '/opt/build/repo/src/pages/style/Index'
11:55:04 AM: If you're trying to use a package make sure that '../../../images/inside-shop-dark.jpg' is installed. If you're trying to use a local file make sure that the path is correct.
11:55:04 AM: error Generating JavaScript bundles failed
11:55:04 AM: Can't resolve '../../../images/shop.jpg' in '/opt/build/repo/src/pages/style/Index'
11:55:04 AM: If you're trying to use a package make sure that '../../../images/shop.jpg' is installed. If you're trying to use a local file make sure that the path is correct.

Is definitely either related to a.) some paths that aren’t right or b.) a case issue.

I am seeing that you have a folder name called Index with an uppercase I but everything else is lowercase? The folders are very nested, are you sure the structure is correct?

Thank you Perry. Ill give this a try when i get the chance today. I must have missed something.

Im really not sure whats going on. I changed the names and i think i cleared one of the issues but the other images still persist to be an issue. here is the new build logs and my repo in hopes we can solve this together. thank you for you help. im totally stumped.

build logs
https://app.netlify.com/sites/romantic-lumiere-39f216/deploys/5f1b9ca7a27f04b3379ff928

git hub repo

Hi, @Germs31. This is the issue you are running into:

The build will work on MacOS because it ignores differences in “letter case”. The build system is Linux and a difference in letter case on Linux will cause errors.

The actual file name is:

../images/spray-room-back.JPG

The site code references it as:

../images/spray-room-back.jpg

This is not the correct name for the file on a Linux system and is causing an error.

You’ll need to change the code to match the filename or change the filename to match the code (one or the other) to resolve this issue.

If there are other questions or concerns, please let us know.

thank you so much! so i changed the files on my text editor and assumed it would update on github. :sweat_smile: everything works now. it was totally a casing issue. thank you again!

1 Like