Gridsome <g-image> images are blurry after build and deploy

Good evening all. I have built and deployed a small mountain biking site built with Gridsome and I’m running into an issue with the images. The images are remaining blurry on the live site. I’ve tried to change my relative path to src/assets/…etc, but they still remain blurry. There are a couple of similar problems posted on here, but none quite as cut and dry as this. Please advise.

Netlify site name: https://nifty-wilson-07a391.netlify.app
No DNS issues
GitHub Repo: https://github.com/mr-spacklefish/gridsome-pdp.git
Build snapshot below:

5:55:28 PM: Build ready to start
5:55:29 PM: build-image version: f72dfd0e8463dbecb2fd70e9fce5154c4f652a32
5:55:29 PM: build-image tag: v3.3.11
5:55:29 PM: buildbot version: 0491622b534ec97319921a4d5a5618bf0cab9974
5:55:30 PM: Fetching cached dependencies
5:55:30 PM: Starting to download cache of 254.9KB
5:55:30 PM: Finished downloading cache in 116.394467ms
5:55:30 PM: Starting to extract cache
5:55:30 PM: Failed to fetch cache, continuing with build
5:55:30 PM: Starting to prepare the repo for build
5:55:30 PM: No cached dependencies found. Cloning fresh repo
5:55:30 PM: git clone https://github.com/mr-spacklefish/gridsome-pdp
5:55:31 PM: Preparing Git Reference refs/heads/master
5:55:31 PM: Starting build script
5:55:31 PM: Installing dependencies
5:55:33 PM: v10.20.1 is already installed.
5:55:33 PM: Now using node v10.20.1 (npm v6.14.4)
5:55:34 PM: Attempting ruby version 2.6.2, read from environment
5:55:35 PM: Using ruby version 2.6.2
5:55:35 PM: Using PHP version 5.6
5:55:35 PM: 5.2 is already installed.
5:55:35 PM: Using Swift version 5.2
5:55:35 PM: Started restoring cached node modules
5:55:35 PM: Finished restoring cached node modules
5:55:35 PM: Installing NPM modules using NPM version 6.14.4
5:55:37 PM: npm
5:56:04 PM: > sharp@0.23.4 install /opt/build/repo/node_modules/sharp
5:56:04 PM: > (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)
5:56:05 PM: info
5:56:05 PM: sharp
5:56:05 PM: Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.8.1/libvips-8.8.1-linux-x64.tar.gz
5:56:07 PM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/core-js
5:56:07 PM: > node -e “try{require(‘./postinstall’)}catch(e){}”
5:56:07 PM: Also, the author of core-js ( zloirock (Denis Pushkarev) · GitHub ) is looking for a good job -)
5:56:07 PM: > cwebp-bin@5.1.0 postinstall /opt/build/repo/node_modules/cwebp-bin
5:56:07 PM: > node lib/install.js
5:56:08 PM: :heavy_check_mark: cwebp pre-build test passed successfully
5:56:08 PM: > mozjpeg@6.0.1 postinstall /opt/build/repo/node_modules/mozjpeg
5:56:08 PM: > node lib/install.js
5:56:08 PM: :heavy_check_mark: mozjpeg pre-build test passed successfully
5:56:08 PM: > pngquant-bin@5.0.2 postinstall /opt/build/repo/node_modules/pngquant-bin
5:56:08 PM: > node lib/install.js
5:56:09 PM: :heavy_check_mark: pngquant pre-build test passed successfully
5:56:09 PM: npm notice created a lockfile as package-lock.json. You should commit this file.
5:56:09 PM: npm
5:56:09 PM: WARN
5:56:09 PM: optional
5:56:09 PM: SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules/chokidar/node_modules/fsevents):
5:56:09 PM: npm
5:56:09 PM: WARN
5:56:09 PM: notsup
5:56:09 PM: SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})
5:56:09 PM: npm
5:56:09 PM: WARN
5:56:09 PM: notsup
5:56:09 PM: Unsupported engine for watchpack-chokidar2@2.0.0: wanted: {“node”:“<8.10.0”} (current: {“node”:“10.20.1”,“npm”:“6.14.4”})
5:56:09 PM: npm
5:56:09 PM: WARN
5:56:09 PM: notsup
5:56:09 PM: Not compatible with your version of node/npm: watchpack-chokidar2@2.0.0
5:56:09 PM: npm
5:56:09 PM: WARN
5:56:09 PM: optional
5:56:09 PM: SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules/watchpack/node_modules/chokidar/node_modules/fsevents):
5:56:09 PM: npm
5:56:09 PM: WARN
5:56:09 PM: notsup
5:56:09 PM: SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})
5:56:09 PM: added 1414 packages from 685 contributors and audited 1417 packages in 33.272s
5:56:10 PM: 39 packages are looking for funding
5:56:10 PM: run npm fund for details
5:56:10 PM: found 0 vulnerabilities
5:56:10 PM: NPM modules installed
5:56:10 PM: Started restoring cached go cache
5:56:10 PM: Finished restoring cached go cache
5:56:11 PM: go version go1.12 linux/amd64
5:56:11 PM: go version go1.12 linux/amd64
5:56:11 PM: Installing missing commands
5:56:11 PM: Verify run directory
5:56:11 PM: Executing user command: gridsome build
5:56:11 PM: Gridsome v0.7.14
5:56:12 PM: Initializing plugins…
5:56:12 PM: Load sources - 0s
5:56:12 PM: Create GraphQL schema - 0.04s
5:56:12 PM: Create pages and templates - 0.01s
5:56:12 PM: Generate temporary code - 0.04s
5:56:12 PM: Bootstrap finish - 0.96s
5:56:12 PM: Compiling assets…
5:56:20 PM: Compile assets - 7.83s
5:56:20 PM: Execute GraphQL (1 queries) - 0s
5:56:20 PM: Write out page data (1 files) - 0s
5:56:20 PM: Render HTML (1 files) - 0.39s
5:56:20 PM: Process files (0 files) - 0s
5:56:21 PM:
5:56:21 PM:
5:56:21 PM: Processing images (0 images) - 0%
5:56:21 PM: Process images (0 images) - 0.43s
5:56:21 PM: Done in 9.7s
5:56:21 PM: Skipping functions preparation step: no functions directory set
5:56:21 PM: Caching artifacts
5:56:21 PM: Started saving node modules
5:56:21 PM: Finished saving node modules
5:56:21 PM: Started saving pip cache
5:56:22 PM: Finished saving pip cache
5:56:22 PM: Started saving emacs cask dependencies
5:56:22 PM: Finished saving emacs cask dependencies
5:56:22 PM: Started saving maven dependencies
5:56:22 PM: Finished saving maven dependencies
5:56:22 PM: Started saving boot dependencies
5:56:22 PM: Finished saving boot dependencies
5:56:22 PM: Started saving go dependencies
5:56:22 PM: Finished saving go dependencies
5:56:24 PM: Build script success
5:56:24 PM: Starting to deploy site from ‘dist’
5:56:24 PM: Creating deploy tree
5:56:25 PM: Creating deploy upload records
5:56:25 PM: 0 new files to upload
5:56:25 PM: 0 new functions to upload
5:56:25 PM: Starting post processing
5:56:26 PM: Post processing done
5:56:26 PM: Site is live
5:56:44 PM: Finished processing build request in 1m14.913015149s

Thanks again for the help.

  • Adam

yeah, i can see what you are seeing also.

first question: does the error appear locally, or only on netlify?

Sorry for the late reply, only deployed to Netlify. Locally they work like a champ.

hm. thats very odd.

i found this: which is sort of the opposite of what your problem is, but maybe it is helpful anyway:

Given that your build works fine…i’m not sure. (also did you remove or change the name of the netlify site? i cant load https://nifty-wilson-07a391.netlify.app/)

Is it possible it is a case issue? :thinking:

If i were you, i might check with the folks over at gridsome, to be honest, they might have seen this problem before!

I’ll try that link for the blurred image problem. I did destroy my repo, I’m going to start from the ground up. I hopped on the Gridsome discord and a few folks helped out there, but still no resolve. I appreciate your help. Thanks again.

totally, sorry i didn’t have any better ideas in the moment. did you get it figured out how to deploy with continuous integration / on repo push? seems like it?

Yes, I finally figured out the repo push/auto update. Thanks.

1 Like