[Support Guide] Troubleshooting your Netlify Large Media Configuration

I skimmed through this thread but didnt seem to see anybody with the same issue.

My images are uploading fine and I see them in under the Large Media tab. The issue i’m running into is that the pointer files arent getting created in github. I have seen a pointer file created but I cant get these pointer files to be created consistently.

I am not sure how it is supposed to work–at what point should these pointer files be created?

github shows image is lfs tracked, but the image is still there instead of the pointer text:

lms

Thanks

Hi, @Coru89. When you use Large Media for a repo/site you are moving the Git LFS service from GitHub to Netlify.

This means that any changes made to files tracked by Git LFS will not be completely tracked at GitHub unless you revert back to using GitHub for the Git LFS service.

The Git repo at GitHub is aware that those files are changing. However, the actual contents of those changes are only happening at Netlify.

There is a quick trick to switch back to GitHub and then back to Netlify for Git LFS service - all without removing the Large Media add-on.

The trick is to remove the file .lfsconfig and then restore it again. That is the file which is redirecting the Git LFS service to Netlify. For example, this should work (all commands are being run in the base directory of the repo):

mv .lfsconfig ..
git lfs push --all origin
mv ../.lfsconfig .

Once all three commands above are run, GitHub should be updated and Large Media will be the Git LFS service again. The first command moves the file up to the parent directory (out of the repo directory) so now the repo will revert to using GitHub for the Git LFS. The second command is a push of the Git LFS files, which now go to GitHub not Netlify. The last command moves the .lfsconfig file back into the repo directory moving the Git LFS service back to Large Media again. The Large Media instance at Netlify doesn’t even know that anything changed.

Note, if you made changes before pushing, they won’t be in Large Media. If that is the case, just run the second command again now that Large Media is in use again files and it will make the updates there as well.

If that doesn’t work or if there are other questions, please let us know.

Hey @luke -Thanks for the response. I was able to get LM working. I am having some performance issues though. I may have to revert to not using LM unless the issue can be resolved. I have a very high TTFB on my images. I made a thread on this: Slow image loading when using Large Media

1 Like

Hi, @Coru89. Thanks for making the new topic and I’ve replied there as well.

@luke Hi, if possible I’d like some help on this same question. I’m trying to upload some jpg images but they’re not appearing on the large media tab. I’ve followed the instructions and afaik all my cli outputs are ok. I’ll list some of them below. The github repo turned the images into pointers and if I run npm run build locally I see the folder img where the images are. However, I downloaded the deploys and this folder is not there. I already tried to force the git lfs push with the images but nothing happens. I have the last push with the tracing enable to send to you if possible. Thanks in advance!

netlify lm:info

  √ Checking Git version [2.31.1.windows.1]
  √ Checking Git LFS version [2.13.3]
  √ Checking Git LFS filters
  √ Checking Netlify's Git Credentials version [0.1.11]

git lfs ls-files

1817fdeeae * src/assets/DSCF1447.jpg
af85bedb29 * src/assets/landing-image.jpg
1faa103af8 * src/assets/myself.jpg

My git-config:

# The first line resets the list of helpers so we can check Netlify's first.
[credential]
  helper = ""

[credential]
  helper = netlify

Hi, @Kato. Normally, I’d ask you to please confirm the site but I only see one site on your team and that site has Large Media enabled so I’m fairly certain I’ve found the site in question.

Looking at that site, I don’t see any of those files in the published deploy. The only files I see are:

/favicon.ico
/index.html
/css/app.2e7b2c15.css
/js/app.274705d5.js
/js/app.274705d5.js.map
/js/chunk-vendors.b305b94a.js
/js/chunk-vendors.b305b94a.js.map

In order for the files to appear in the Large Media tab and to be available for the deployed site, those files must be put somewhere in or under the publish directory (which is dist for this site).

Would you please confirm the images are being moved to that directory before the build is complete?

Thanks! That’s weird, I see the files if I run the same command locally. They are in the folder /img which doesn’t appear on this list.

Hi, @Kato. When you say this:

That’s weird, I see the files if I run the same command locally.

What command are you referring to? I don’t show any command above. The list is coming from a downloaded deploy.

Did you download a deploy and examine it? If so, which deploy was it?

The last deploy of this site which contained a directory “img” was back in 2020.

The key here is that uploading a file to Large Media is not enough to make the file available for the deploy site. For all deploys (both those with and without Large Media) the only files available for the deployed site are those files found in the publish directory or in a subdirectory under that publish directory.

In the case of your site, the image files are not being placed in the publish directory. This is why the files don’t display.

The files being placed in the publish directory is a always hard requirement for the files to be part of the deployed site. There are no exception to that requirement. Using Large Media does not change that requirement.

Your files are missing because you don’t publish them by placing them in the publish directory. Until that is done, your images won’t work. Again, this is always the rule for a files deployed at Netlify with or without Large Media being used.

If there are other questions about this, please let us know.

Hi,

I moved my upload directory to LFS. It seems to work for image files with transformation but files that do not request image with ?nf_resize, do not show up. No idea what I should do?

Cheers
Olaf

Could you point us to the site or the asset URL?

Hi,

I’m building a photographer website for a training project and I use Next.js, Netlify CMS and I want to deploy on Netlify.

I have an issue with a type error during the build phase which I think is linked to Large Media.
I linked my website to Netlify, set up Large Media, configured git lfs as per the documentation, my images on the Git repo have been replaced by text, but I can’t find them on Large Media and when I try to deploy I get this :

10:34:55 PM:   2. Build command from Netlify app                             
10:34:55 PM: ────────────────────────────────────────────────────────────────
10:34:55 PM: ​
10:34:55 PM: $ npm run build-site
10:34:56 PM: > charles-cantin-photographe@1.0.0 build-site
10:34:56 PM: > next build
10:34:56 PM: info  - Linting and checking validity of types...
10:34:57 PM: info  - Creating an optimized production build...
10:34:58 PM: Failed to compile.
10:34:58 PM: 
10:34:58 PM: ./public/images/uploads/baby-juan-encalada-2BalskDOoLg-unsplash.jpg
10:34:58 PM: TypeError: unsupported file type: undefined (file: undefined)
10:34:58 PM:     at lookup (/opt/build/repo/node_modules/next/dist/compiled/image-size/index.js:1:1454)
10:34:58 PM:     at Object.imageSize [as default] (/opt/build/repo/node_modules/next/dist/compiled/image-size/index.js:1:2131)
10:34:58 PM:     at Object.getImageSize (/opt/build/repo/node_modules/next/dist/server/image-optimizer.js:658:56)
10:34:58 PM:     at /opt/build/repo/node_modules/next/dist/build/webpack/loaders/next-image-loader.js:38:85
10:34:58 PM:     at Span.traceAsyncFn (/opt/build/repo/node_modules/next/dist/trace/trace.js:79:26)
10:34:58 PM:     at /opt/build/repo/node_modules/next/dist/build/webpack/loaders/next-image-loader.js:38:47
10:34:58 PM:     at Span.traceAsyncFn (/opt/build/repo/node_modules/next/dist/trace/trace.js:79:26)
10:34:58 PM:     at Object.nextImageLoader (/opt/build/repo/node_modules/next/dist/build/webpack/loaders/next-image-loader.js:24:28)
10:34:58 PM: Import trace for requested module:
10:34:58 PM: ./public/images/uploads/baby-juan-encalada-2BalskDOoLg-unsplash.jpg
10:34:58 PM: ./public/images/uploads/ sync nonrecursive \.(png%7Cjpe?g)$
10:34:58 PM: ./public/images/uploads/planche-invit.jpg

This happens for the three pictures that I have in the public/images/uploads folder.

Here is my .gitattributes :

*.jpg filter=lfs diff=lfs merge=lfs -text
*.jpeg filter=lfs diff=lfs merge=lfs -text
*.png filter=lfs diff=lfs merge=lfs -text

and the result of git lfs ls-files :

$ git lfs ls-files
addd771254 * public/assets/favicon-appareil-photo.png
299d144686 * public/assets/logo-transparent.png
27f9210dda * public/images/uploads/baby-juan-encalada-2BalskDOoLg-unsplash.jpg
de8362d5db * public/images/uploads/planche-invit.jpg
fc9733490e * public/images/uploads/test.jpg

I’m still quite the noob, I can’t find the reason of this.

EDIT: I tried to disable Next.js image optimization in next.config.js. Now the error message has changed and I see the text version of the images from Git, but I’m still stuck !

12:07:11 AM: Module parse failed: Unexpected token (1:8)
12:07:11 AM: You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
12:07:11 AM: > version https://git-lfs.github.com/spec/v1
12:07:11 AM: | oid sha256:fc9733490e05f84274c12473fbc906bcda1f121feb997ce1d6546ec9c7922e6e
12:07:11 AM: | size 15726
12:07:11 AM: Import trace for requested module:
12:07:11 AM: ./public/images/uploads/test.jpg
12:07:11 AM: ./public/images/uploads/ sync nonrecursive \.(png%7Cjpe?g)$
12:07:11 AM: > Build failed because of webpack errors

Hi, @Benido. Next.js is not compatible with Large Media (or vice versa).

This means we will likely want to disable Large Media for this site. If we are going to do so, please read the following before proceeding:

If you have read that, please confirm you have backups of all files and let us know which site to remove Large Media from. To identify the site, you can send us the site subdomain, API ID (the id not the key), or a link to the site (whichever you prefer).

Once we know which site, we’ll reply soon to confirm the add-on has been uninstalled.

If there are questions about any of this, please let us know.

Thanks for the quick answer, I’ve created a new topic on admin

Cheers,

Benido

Hi, I’m having issues with LM on a recent site.

I’ve followed, all the steps and just keep being asked for credentials.

I’ve logged out and back in, restarted my computer, manually installed the credential helper, verified the paths in my zshrc, set lockverify to false, added the credential helper to the local directory as well.

All always asks for credentials when it tries to upload

netlify lm:info
  ✔ Checking Git version [2.38.1]
  ✔ Checking Git LFS version [3.2.0]
  ✔ Checking Git LFS filters
  ✔ Checking Netlify's Git Credentials version [0.1.11]

I’m pulling my hair out…

Hi, @ekwoka. Where are you being asked for credentials? Are you using Git in the shell (AKA the terminal or the command line) or are you using Git in some other way?

For example, maybe you are using the VS Code IDE and you are getting the message there. If so, you need to configure the environment for the IDE to use the same Git configuration. How that is done varies by IDE.

If you get the error in the shell, then would you please run the following command and share the output with us?

GIT_TRACE=true GIT_CURL_VERBOSE=true git lfs push --all origin

You can post that information publicly or you can private message (PM) that to one of our support staff. I’ve confirmed that PMs are enabled for your forum login. Please keep in mind that only one person can see the PM and this will likely mean a slower reply than posting the information publicly. Please feel free to reply to however you prefer though.

Thanks for the quick help Luke,

This happens in the native terminal (this is Mac btw) which is zsh, my preferred terminal Warp which is zsh, the terminal in VScode which is zsh, and also blocks pushing with github desktop (that just hangs since it’s waiting for input so it doesn’t do anything at all).

GIT_TRACE=true GIT_CURL_VERBOSE=true git lfs push --all origin
10:10:29.679927 git.c:750 trace: exec: git-lfs push --all origin
10:10:29.680485 run-command.c:655 trace: run_command: git-lfs push --all origin
10:10:29.688138 trace git-lfs: exec: git 'version'
10:10:29.693850 trace git-lfs: exec: git '-c' 'filter.lfs.smudge=' '-c' 'filter.lfs.clean=' '-c' 'filter.lfs.process=' '-c' 'filter.lfs.required=false' 'remote'
10:10:29.698680 trace git-lfs: exec: git '-c' 'filter.lfs.smudge=' '-c' 'filter.lfs.clean=' '-c' 'filter.lfs.process=' '-c' 'filter.lfs.required=false' 'rev-parse' 'HEAD' '--symbolic-full-name' 'HEAD'
10:10:29.702680 trace git-lfs: exec: git '-c' 'filter.lfs.smudge=' '-c' 'filter.lfs.clean=' '-c' 'filter.lfs.process=' '-c' 'filter.lfs.required=false' 'rev-parse' '--git-dir' '--show-toplevel'
10:10:29.706598 trace git-lfs: exec: git 'config' '--includes' '-l'
10:10:29.710145 trace git-lfs: exec: git 'rev-parse' '--is-bare-repository'
10:10:29.713659 trace git-lfs: exec: git 'config' '--includes' '-l' '-f' '/Users/claire/git/SolidPort/.lfsconfig'
10:10:29.717310 trace git-lfs: Upload refs [] to remote origin
10:10:29.717353 trace git-lfs: exec: git '-c' 'filter.lfs.smudge=' '-c' 'filter.lfs.clean=' '-c' 'filter.lfs.process=' '-c' 'filter.lfs.required=false' 'show-ref'
10:10:29.721889 trace git-lfs: exec: git '-c' 'filter.lfs.smudge=' '-c' 'filter.lfs.clean=' '-c' 'filter.lfs.process=' '-c' 'filter.lfs.required=false' 'show-ref'
10:10:29.725564 trace git-lfs: exec: git '-c' 'filter.lfs.smudge=' '-c' 'filter.lfs.clean=' '-c' 'filter.lfs.process=' '-c' 'filter.lfs.required=false' 'ls-remote' '--heads' '--tags' '-q' 'origin'
10:10:30.514514 trace git-lfs: tq: running as batched queue, batch size of 100
10:10:30.514859 trace git-lfs: run_command: git rev-list --objects --do-walk --stdin --
10:10:30.514872 trace git-lfs: exec: git '-c' 'filter.lfs.smudge=' '-c' 'filter.lfs.clean=' '-c' 'filter.lfs.process=' '-c' 'filter.lfs.required=false' 'rev-list' '--objects' '--do-walk' '--stdin' '--'
10:10:30.517428 trace git-lfs: exec: git '-c' 'filter.lfs.smudge=' '-c' 'filter.lfs.clean=' '-c' 'filter.lfs.process=' '-c' 'filter.lfs.required=false' 'cat-file' '--batch-check'
10:10:30.519232 trace git-lfs: exec: git '-c' 'filter.lfs.smudge=' '-c' 'filter.lfs.clean=' '-c' 'filter.lfs.process=' '-c' 'filter.lfs.required=false' 'rev-parse' '--git-common-dir'
10:10:30.555867 trace git-lfs: tq: sending batch of size 1
10:10:30.556014 trace git-lfs: api: batch 1 files
10:10:30.556120 trace git-lfs: creds: git credential fill ("https", "[bae50d02-4a92-4246-b9e5-60627261104d.netlify.app](http://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app)", "")
10:10:30.556146 trace git-lfs: exec: git 'credential' 'fill'
Enter basic credentials for '[https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/](https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/)':
Username: ^C

10:10:39.278246 trace git-lfs: credential fill error: `git credential fill` error: signal: interrupt
10:10:39.278233 trace git-lfs: filepathfilter: creating pattern ".git" of type gitignore
10:10:39.278391 trace git-lfs: api error: Git credentials for [https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media](https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media) not found:
credential fill errors:
`git credential fill` error: signal: interrupt
10:10:39.278445 trace git-lfs: filepathfilter: creating pattern "**/.git" of type gitignore
batch response: Git credentials for [https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media](https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media) not found:
credential fill errors:
`git credential fill` error: signal: interrupt
Uploading LFS objects: 0% (0/1), 0 B | 0 B/s, done.
10:10:39.278649 trace git-lfs: filepathfilter: accepting "tmp"
git config -l | grep netlify
include.path=/Users/name/Library/Preferences/netlify/helper/git-config
credential.helper=netlify
credential.[https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app.provider](https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app.provider)=generic
lfs.[https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media.access=basic](https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media.access=basic)
lfs.[https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media.locksverify=false](https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media.locksverify=false)
credential.helper=netlify

Here’s the output to that command and the relevant git config entries.

Hey there, @ekwoka :wave:

Thanks for your patience here-- we haven’t forgotten about you! We will follow up soon with more thoughts and next steps.

Hi, @ekwoka and sorry for the delay. While the git config -l | grep netlify contains some useful information, it is hiding other details. For example, I would need to see every credential.helper link to troubleshoot.

On MacOS there are usually three lines like so:

credential.helper=
credential.helper=netlify
credential.helper=osxkeychain

This might have preceding or following entries as well. Seeing all lines would be helpful.

Also, these links do not appear correct to me:

credential.[https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app.provider](https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app.provider)=generic
lfs.[https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media.access=basic](https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media.access=basic)
lfs.[https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media.locksverify=false](https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media.locksverify=false)

The URLs are in markdown format above. The should look like this instead:

lfs.https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media.access=basic
lfs.https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media.locksverify=false

I don’t know if your gitconfig actually looks like this or is the information was mangled by the forum software. If the raw text has the markdown version, that must be changed.

The logs have the same format:

batch response: Git credentials for [https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media](https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media) not found:

This makes me concerned the gitconfig itself contains this invalid format. If so, please convert it to the correct format.

Also, this line is unknown to me:

credential.[https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app.provider](https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app.provider)=generic

I’ve not see that entry before and I have no entries with generic for my Large Media test site:

$ git config -l | grep generic
$

If you could make the URL changes (from markdown to a normal URL) and send the unredacted/unfiltered git config -l output that will tell us more. (The URL changes alone might be all that is required to resolve this.)

@luke The markdown stuff just came from the reply by email conversion to forum post, since it saw the link it translated it awkwardly.

Here’s the credential list:

credential.helper=osxkeychain
credential.helper=
credential.helper=netlify
credential.helper=
credential.helper=/usr/local/share/gcm-core/git-credential-manager-core
credential.https://dev.azure.com.usehttppath=true
credential.https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app.provider=generic

I hunted down and deleted that =generic entry but the results are the same

I did check and remove the other helper= empty entry and now it’s working.

But upon pushing, it did then remake that =generic entry, not sure why I’ve never had that before and you’ve not had it…

Hi, @ekwoka. Sorry for the delay as I was out of office and thank you for letting us know it is working now.

The information above does reveal an issue and, most likely, what the root cause was. (I know you fixed it but I wanted to clarify for any future readers here.)

I first want to point out the behavior of the following lines which contain only and exactly this:

credential.helper=

The lines where the credential.helper is set to the empty string have the effect of resetting or erasing all precedingcredential.helper entries. It resets the list to empty anytime it occurs.

With that is mind, what follows is an explanation of what the entries do. I’m splitting up the file in the order lines appeared. Below section I’ll explain what the lines above do with a bullet point:

credential.helper=osxkeychain
  • adds the MacOS keychain app for handling authentication credentials
credential.helper=
credential.helper=netlify
  • erases the previous settings and only add Netlify’s Git credential helper
credential.helper=
credential.helper=/usr/local/share/gcm-core/git-credential-manager-core
credential.https://dev.azure.com.usehttppath=true
credential.https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app.provider=generic

This last section is syntax I’m not familiar with but which is almost certainly something specific to the git-credential-manager.

What it appears to me has happened is that the git-credential-manager has overwritten the Netlify Git credential helper settings.

The correct settings would be something similar to this:

credential.helper=
credential.helper=netlify
credential.helper=osxkeychain
credential.helper=/usr/local/share/gcm-core/git-credential-manager-core
credential.https://dev.azure.com.usehttppath=true
credential.https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app.provider=generic
lfs.https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media.access=basic
lfs.https://bae50d02-4a92-4246-b9e5-60627261104d.netlify.app/.netlify/large-media.locksverify=false

When you say you removed the other helper= empty entry, I’m guessing it was the one in the middle. That would likely them make the entries similar (but not identical) to the example above.

Note, the credential.helper=osxkeychain entry may be redundant. My understanding is that it is not required if you only use HTTPS (and not SSH) for remote actions when git-credential-manager is being used. If you use both HTTPS and SSH, then both osxkeychain and git-credential-manager are required.

Thanks again for letting us know it is working now and if there are any other questions, please let us know.