Broken Image Links

[nsalow32]

www.nicolesalow.com/design
https://github.com/nsalow32/Salow-portfolio-2022

I'm using a netlify template that I've altered a bit (I'm very new to this in general, and have never used Jigsaw before). I'm unsure where to save images and how to link them properly so they are copied when netlify builds the site. I've learned that when building, a new folder called assets is created, and within that are the main.js and css files, but I can't seem to get the images to copy to the new site, so the image things are broken. Where should I be saving my images and how should I be linking them on my site?

Below are my config.php and webpack.mix.js files.

Config.php

`<?php

return [
    'production' => false,
    'baseUrl' => 'https://www.nicolesalow.com',
    'site' => [
        'title' => 'Nicole Salow  |  Senior Graphic Designer',
        'description' => 'Nicole Salow Portfolio Site.',
        'image' => 'favicon.ico',
    ],

    'owner' => [
        'name' => 'Nicole Salow',
    ],
    'links' => [
        'linkedin' => 'https://www.linkedin.com/in/nicolesalow/',
        'github' => 'https://github.com/nsalow32',
    ],
    'services' => [
        'cmsVersion' => '~2.10',
        'analytics' => 'UA-XXXXX-Y',
        'disqus' => 'artisanstatic',
        'formcarry' => 'XXXXXXXXXXXX',
        'cloudinary' => [
            'cloudName' => 'artisanstatic',
            'apiKey' => '365895137117119',
        ],
    ],
    'collections' => [
        'posts' => [
            'path' => 'posts/{filename}',
            'sort' => '-date',
            'extends' => '_layouts.post',
            'section' => 'postContent',
            'isPost' => true,
            'comments' => true,
            'tags' => [],
            'hasTag' => function ($page, $tag) {
                return collect($page->tags)->contains($tag);
            },
            'prettyDate' => function ($page, $format = 'M j, Y') {
                return date($format, $page->date);
            },
        ],
        'tags' => [
            'path' => 'tags/{filename}',
            'extends' => '_layouts.tag',
            'section' => '',
            'name' => function ($page) {
                return $page->getFilename();
            },
        ],
    ],
];
`

webpack.mix.js

const mix = require('laravel-mix');
require('laravel-mix-jigsaw');

mix.disableSuccessNotifications();
mix.setPublicPath('source/assets/build');

mix.jigsaw()
    .js('source/_assets/js/main.js', 'js')
    .sass('source/_assets/sass/main.scss', 'css')
    .options({
        processCssUrls: false,
    })
    .version();

---

[bakerkretzmar]

TL;DR—Put them in source/assets/img.

The _assets folder is not copied to your output directory, it's ignored by Jigsaw and is where your source asset files are stored. Mix compiles them to assets, which, because it doesn't start with an underscore, is copied by Jigsaw into your output directory. Static assets like images or fonts can just live right in assets.

In your templates you can then refer to them just with an absolute path based on your source folder structure, e.g. /assets/img/post-cover-image-2.png, or to create a full URL, the path wrapped with the URL helper: url('assets/img/post-cover-image-2.png').

Check out our Blog starter template to see a complete Jigsaw site doing this: https://github.com/tighten/jigsaw-blog-template