Image Links Broken, but file path is correct?

Support
, , ,
#1

This is a template I’m working with, and I am very new at this. I have almost 0 experience with php.

I’m not sure if this is an issue with where I’m saving the image, or something with the build. I get no errors through netlify, but a 404 error on the image. My site is www.nicolesalow.com. The page that has a test image is Design | Nicole Salow | Senior Graphic Designer

My github files are here: GitHub - nsalow32/Salow-portfolio-2022

I’ve tried 20 different locations and ways to link the image and none of them work. Right now the image is sitting in a public folder.

Here is the latest deploy log:
Deploy log
Preview

5:06:18 PM: Build ready to start
5:06:20 PM: build-image version: d2c6dbeac570350a387d832f64bc980dc964ad65 (focal)
5:06:20 PM: build-image tag: v4.8.0
5:06:20 PM: buildbot version: a018caed2ab46726023e1532e0d3214727318b1c
5:06:20 PM: Fetching cached dependencies
5:06:20 PM: Starting to download cache of 121.8MB
5:06:21 PM: Finished downloading cache in 1.306167608s
5:06:21 PM: Starting to extract cache
5:06:25 PM: Finished extracting cache in 3.608033191s
5:06:25 PM: Finished fetching cache in 4.93197457s
5:06:25 PM: Starting to prepare the repo for build
5:06:25 PM: Preparing Git Reference refs/heads/master
5:06:25 PM: Parsing package.json dependencies
5:06:27 PM: Starting build script
5:06:27 PM: Installing dependencies
5:06:27 PM: Python version set to 2.7
5:06:27 PM: Started restoring cached node version
5:06:28 PM: Finished restoring cached node version
5:06:29 PM: v12.16.1 is already installed.
5:06:29 PM: Now using node v12.16.1 (npm v6.13.4)
5:06:29 PM: Started restoring cached build plugins
5:06:29 PM: Finished restoring cached build plugins
5:06:29 PM: Attempting ruby version 2.7.2, read from environment
5:06:30 PM: Using ruby version 2.7.2
5:06:31 PM: Using PHP version 7.4
5:06:31 PM: No npm workspaces detected
5:06:31 PM: Started restoring cached node modules
5:06:31 PM: Finished restoring cached node modules
5:06:32 PM: Started restoring cached composer dependencies
5:06:32 PM: Finished restoring cached composer dependencies
5:06:32 PM: Installing dependencies from lock file (including require-dev)
5:06:32 PM: Verifying lock file contents can be installed on current platform.
5:06:32 PM: Package operations: 35 installs, 0 updates, 0 removals
5:06:32 PM: - Downloading doctrine/inflector (2.0.4)
5:06:32 PM: - Downloading erusev/parsedown (1.7.4)
5:06:32 PM: - Downloading hamcrest/hamcrest-php (v2.0.1)
5:06:32 PM: - Downloading voku/portable-ascii (1.5.6)
5:06:32 PM: - Downloading symfony/translation-contracts (v2.5.0)
5:06:32 PM: - Downloading symfony/polyfill-php80 (v1.23.1)
5:06:32 PM: - Downloading symfony/polyfill-mbstring (v1.23.1)
5:06:32 PM: - Downloading symfony/deprecation-contracts (v2.5.0)
5:06:32 PM: - Downloading symfony/translation (v5.4.1)
5:06:32 PM: - Downloading nesbot/carbon (2.55.2)
5:06:32 PM: - Downloading psr/simple-cache (1.0.1)
5:06:32 PM: - Downloading psr/container (1.1.2)
5:06:32 PM: - Downloading illuminate/contracts (v7.30.6)
5:06:32 PM: - Downloading illuminate/support (v7.30.6)
5:06:32 PM: - Downloading illuminate/container (v7.30.6)
5:06:32 PM: - Downloading illuminate/events (v7.30.6)
5:06:32 PM: - Downloading symfony/finder (v5.4.0)
5:06:32 PM: - Downloading illuminate/filesystem (v7.30.6)
5:06:32 PM: - Downloading symfony/polyfill-php73 (v1.23.0)
5:06:32 PM: - Downloading symfony/service-contracts (v2.5.0)
5:06:32 PM: - Downloading symfony/polyfill-intl-normalizer (v1.23.0)
5:06:32 PM: - Downloading symfony/polyfill-intl-grapheme (v1.23.1)
5:06:32 PM: - Downloading symfony/polyfill-ctype (v1.23.0)
5:06:32 PM: - Downloading symfony/string (v5.4.0)
5:06:32 PM: - Downloading phpoption/phpoption (1.8.1)
5:06:32 PM: - Downloading vlucas/phpdotenv (v4.2.1)
5:06:32 PM: - Downloading symfony/yaml (v5.4.0)
5:06:32 PM: - Downloading symfony/var-dumper (v5.4.1)
5:06:32 PM: - Downloading symfony/process (v5.4.0)
5:06:32 PM: - Downloading symfony/console (v5.4.1)
5:06:32 PM: - Downloading mockery/mockery (1.4.4)
5:06:32 PM: - Downloading mnapoli/front-yaml (1.8.0)
5:06:32 PM: - Downloading michelf/php-markdown (1.9.1)
5:06:32 PM: - Downloading illuminate/view (v7.30.6)
5:06:32 PM: - Downloading tightenco/jigsaw (v1.3.38)
5:06:33 PM: - Installing doctrine/inflector (2.0.4): Extracting archive
5:06:33 PM: - Installing erusev/parsedown (1.7.4): Extracting archive
5:06:33 PM: - Installing hamcrest/hamcrest-php (v2.0.1): Extracting archive
5:06:33 PM: - Installing voku/portable-ascii (1.5.6): Extracting archive
5:06:33 PM: - Installing symfony/translation-contracts (v2.5.0): Extracting archive
5:06:33 PM: - Installing symfony/polyfill-php80 (v1.23.1): Extracting archive
5:06:33 PM: - Installing symfony/polyfill-mbstring (v1.23.1): Extracting archive
5:06:33 PM: - Installing symfony/deprecation-contracts (v2.5.0): Extracting archive
5:06:33 PM: - Installing symfony/translation (v5.4.1): Extracting archive
5:06:33 PM: - Installing nesbot/carbon (2.55.2): Extracting archive
5:06:33 PM: - Installing psr/simple-cache (1.0.1): Extracting archive
5:06:33 PM: - Installing psr/container (1.1.2): Extracting archive
5:06:33 PM: - Installing illuminate/contracts (v7.30.6): Extracting archive
5:06:33 PM: - Installing illuminate/support (v7.30.6): Extracting archive
5:06:33 PM: - Installing illuminate/container (v7.30.6): Extracting archive
5:06:33 PM: - Installing illuminate/events (v7.30.6): Extracting archive
5:06:33 PM: - Installing symfony/finder (v5.4.0): Extracting archive
5:06:33 PM: - Installing illuminate/filesystem (v7.30.6): Extracting archive
5:06:33 PM: - Installing symfony/polyfill-php73 (v1.23.0): Extracting archive
5:06:33 PM: - Installing symfony/service-contracts (v2.5.0): Extracting archive
5:06:33 PM: - Installing symfony/polyfill-intl-normalizer (v1.23.0): Extracting archive
5:06:33 PM: - Installing symfony/polyfill-intl-grapheme (v1.23.1): Extracting archive
5:06:33 PM: - Installing symfony/polyfill-ctype (v1.23.0): Extracting archive
5:06:33 PM: - Installing symfony/string (v5.4.0): Extracting archive
5:06:33 PM: - Installing phpoption/phpoption (1.8.1): Extracting archive
5:06:33 PM: - Installing vlucas/phpdotenv (v4.2.1): Extracting archive
5:06:33 PM: - Installing symfony/yaml (v5.4.0): Extracting archive
5:06:33 PM: - Installing symfony/var-dumper (v5.4.1): Extracting archive
5:06:33 PM: - Installing symfony/process (v5.4.0): Extracting archive
5:06:33 PM: - Installing symfony/console (v5.4.1): Extracting archive
5:06:33 PM: - Installing mockery/mockery (1.4.4): Extracting archive
5:06:33 PM: - Installing mnapoli/front-yaml (1.8.0): Extracting archive
5:06:33 PM: - Installing michelf/php-markdown (1.9.1): Extracting archive
5:06:33 PM: - Installing illuminate/view (v7.30.6): Extracting archive
5:06:33 PM: - Installing tightenco/jigsaw (v1.3.38): Extracting archive
5:06:33 PM: Generating autoload files
5:06:33 PM: 21 packages you are using are looking for funding.
5:06:33 PM: Use the composer fund command to find out more!
5:06:33 PM: Started restoring cached go cache
5:06:33 PM: Finished restoring cached go cache
5:06:33 PM: go version go1.16.5 linux/amd64
5:06:33 PM: go version go1.16.5 linux/amd64
5:06:33 PM: Installing missing commands
5:06:33 PM: Verify run directory
5:06:35 PM: ​
5:06:35 PM: ────────────────────────────────────────────────────────────────
5:06:35 PM: Netlify Build
5:06:35 PM: ────────────────────────────────────────────────────────────────
5:06:35 PM: ​
5:06:35 PM: ❯ Version
5:06:35 PM: @netlify/build 27.0.2
5:06:35 PM: ​
5:06:35 PM: ❯ Flags
5:06:35 PM: baseRelDir: true
5:06:35 PM: buildId: 6271a75a1f900c0009e14223
5:06:35 PM: deployId: 6271a75a1f900c0009e14225
5:06:35 PM: ​
5:06:35 PM: ❯ Current directory
5:06:35 PM: /opt/build/repo
5:06:35 PM: ​
5:06:35 PM: ❯ Config file
5:06:35 PM: /opt/build/repo/netlify.toml
5:06:35 PM: ​
5:06:35 PM: ❯ Context
5:06:35 PM: production
5:06:35 PM: ​
5:06:35 PM: ────────────────────────────────────────────────────────────────
5:06:35 PM: 1. build.command from netlify.toml
5:06:35 PM: ────────────────────────────────────────────────────────────────
5:06:35 PM: ​
5:06:35 PM: $ npm run prod
5:06:35 PM: > @ prod /opt/build/repo
5:06:35 PM: > mix --production
5:06:37 PM: [info] [webpackbar] Compiling Mix
5:06:40 PM:
5:06:40 PM:
5:06:40 PM: Laravel Mix v6.0.39
5:06:40 PM:
5:06:40 PM: :heavy_check_mark: Compiled Successfully in 2575ms
5:06:40 PM: ┌───────────────────────────────────┬───────────┐
5:06:40 PM: │ File │ Size │
5:06:40 PM: ├───────────────────────────────────┼───────────┤
5:06:40 PM: Creating deploy upload records
5:06:40 PM: │ /js/main.js │ 75.2 KiB │
5:06:40 PM: │ /js/main.js.LICENSE.txt │ 986 bytes │
5:06:40 PM: │ css/main.css │ 7.58 KiB │
5:06:40 PM: └───────────────────────────────────┴───────────┘
5:06:40 PM: [success] [webpackbar] Mix: Compiled successfully in 2.65s
5:06:40 PM: webpack compiled successfully
5:06:40 PM: ​
5:06:40 PM: (build.command completed in 4.9s)
5:06:40 PM: ​
5:06:40 PM: ────────────────────────────────────────────────────────────────
5:06:40 PM: 2. Deploy site
5:06:40 PM: ────────────────────────────────────────────────────────────────
5:06:40 PM: ​
5:06:40 PM: Starting to deploy site from ‘build_production’
5:06:40 PM: Creating deploy tree
5:06:41 PM: Starting post processing
5:06:40 PM: 2 new files to upload
5:06:40 PM: 0 new functions to upload
5:06:41 PM: Site deploy was successfully initiated
5:06:41 PM: ​
5:06:41 PM: Post processing - HTML
5:06:41 PM: (Deploy site completed in 569ms)
5:06:41 PM: ​
5:06:41 PM: ────────────────────────────────────────────────────────────────
5:06:41 PM: Netlify Build Complete
5:06:41 PM: ────────────────────────────────────────────────────────────────
5:06:41 PM: ​
5:06:41 PM: (Netlify Build completed in 5.5s)
5:06:41 PM: Caching artifacts
5:06:41 PM: Started saving node modules
5:06:41 PM: Post processing - header rules
5:06:41 PM: Finished saving node modules
5:06:41 PM: Started saving build plugins
5:06:41 PM: Finished saving build plugins
5:06:41 PM: Post processing - redirect rules
5:06:41 PM: Started saving pip cache
5:06:41 PM: Finished saving pip cache
5:06:41 PM: Started saving emacs cask dependencies
5:06:41 PM: Finished saving emacs cask dependencies
5:06:41 PM: Post processing done
5:06:41 PM: Started saving maven dependencies
5:06:41 PM: Finished saving maven dependencies
5:06:41 PM: Started saving boot dependencies
5:06:41 PM: Finished saving boot dependencies
5:06:41 PM: Started saving composer dependencies
5:06:41 PM: Finished saving composer dependencies
5:06:41 PM: Started saving rust rustup cache
5:06:41 PM: Finished saving rust rustup cache
5:06:41 PM: Started saving go dependencies
5:06:41 PM: Finished saving go dependencies
5:06:41 PM: Build script success
5:06:45 PM: Site is live :sparkles:
5:07:01 PM: Finished processing build request in 40.956105106s

#2

Hey @nsalow32

Have you tried downloading the deployed files to see that everything is where you intended?

deploy-log-details-download
deploy-log-details-download2368×1460 212 KB

The image is at https://www.nicolesalow.com/public/test.jpg

I haven’t used Jigsaw SSG before, however looking at the Organizing your assets shows a suggested project directory structure.

#3

Thank you! I didn’t realize this format had a name (Jigsaw SSG), so that will be helpful in figuring this out.
I downloaded the deployed files after your comment and everything was inthe right place except the favicon files. They were just out in the main “area” instead of inside the assets/favicon folder.

#4

I’ve figured out that once neflity is building and publishing the site, it’s creating an new folder called assets (not _assets which exists already in my github files, this is different). Then within that it creates the folder ‘build’ and then the css and js folders are there with their files, as well as a mix-manifest.json which has the following:

{
    "/js/main.js": "/js/main.js?id=28106e36b52ace932266",
    "/css/main.css": "/css/main.css?id=a454ef01169a269c157b"
}

So it’s automatically creating this folder, and I believe that’s where my images need to be. The question is how do I get them to show up there when it builds? I’ve tried various versions of "mix.copyDirectory('source/_assets/images', 'images'); " in my webpack.mix.js file and I get the error that the directory doesn’t exist.

Is this code the boostrap.php file causing issues?

function media($path)
{
    $cloudName = $GLOBALS['container']->config['services']['cloudinary']['cloudName'];
    return "https://res.cloudinary.com/{$cloudName}/{$path}";
}

or something in the config.blade.yml file?

backend:
  name: git-gateway
  branch: master
  squash_merges: true
publish_mode: editorial_workflow
media_folder: images
media_library:
  name: 
  config:
    cloud_name: 
    api_key: 
site_url: {{ $page->baseUrl }}
collections:
  - name: "posts"
    label: "Posts"
    label_singular: "Post"
    folder: "source/_posts"
    create: true
    slug: "@{{slug}}"
    fields:
      - {label: "Title", name: "title", widget: "string", default: "Title"}
      - {label: "Date", name: "date", widget: "datetime", format: "YYYY-MM-DD", timeFormat: false, pickerUtc: true}
      - {label: "Tags", name: "tags", widget: "list", required: false}
      - {label: "Image", name: "image", widget: "image"}
      - {label: "Comments", name: "comments", widget: "boolean", default: true}
      - {label: "Body", name: "body", widget: "markdown"}
#5

Referring back to the Organizing your assets documentation, it is the SSG you are using that is creating the assets directory which states

By default, once Webpack compiles your assets, they will be placed in their corresponding subdirectories in /source/assets/build :

and goes on to say

Then, when Jigsaw builds your site, the entire /source/assets directory containing your build files (and any other directories containing static assets, such as images or fonts , that you choose to store there) will be copied to /build_local or /build_production.

Not having used this SSG before I cannot answer this question definitively. However, looking at the quotes above, if there is an images directory inside the _assets directory, this is copied as part of the build.

Alternatively, it appears from the documentation that having an assets directory (in addition to the _assets directory) in which there is an images directory, this becomes available in the deploy via assets/images.

This is all a little guesswork based on what I can see in the documentation as I have not used this SSG before.

You might do well to post on the Jigsaw Discussions on GitHub as they will have more insight into the specifics of the SSG and the configuration.