Ajax-loader_c5cd7f53.gif missing, slick

sage
1

I can’t find solution how to fix 404 error for ajax-loader gif…

“…/dist/vendor/ajax-loader_c5cd7f53.gif 404 (Not Found)”

I have added slick in main.scss
@import “~slick-carousel/slick/slick.scss”;
@import “~slick-carousel/slick/slick-theme.scss”;

and variables in common/_variables.scss

// Slick Carousel font path
$slick-font-path: “~slick-carousel/slick/fonts/”;

// Slick Carousel ajax-loader.gif path
$slick-loader-path: “~slick-carousel/slick/”;

Arrows and all the stuff from slick carousel loading properly. But this gif can’t be loaded.
Do you have similar issue ?

2

Solved when I changed the limit in webpack.config.js from 4096 to 24096.

{
test: /.(ttf|otf|eot|woff2?|png|jpe?g|gif|svg|ico)$/,
include: config.paths.assets,
loader: ‘url’,
options: {
limit: 24096,
name: [path]${assetsFilenames}.[ext],
},
},
{
test: /.(ttf|otf|eot|woff2?|png|jpe?g|gif|svg|ico)$/,
include: /node_modules/,
loader: ‘url’,
options: {
limit: 24096,
outputPath: ‘vendor/’,
name: ${config.cacheBusting}.[ext],
},
},
],

But I am not sure that is good solution and should I change limits in webpack ?

1 Like
3

Thank you for the solution. I do not know if it is correct either, but it worked.

1 Like
4

I had the same problem, and the only fix also for me was to update the limit in webpack.config.js as @Jacek suggested.
I noticed that the ajax-loader.gif is 4,178 bytes so you can increase the limit in webpack.config.js just a bit, I tried with 4180 and it works.

@mmirus in another post said

so I don’t think that increasing the limit just a little bit is a bad solution, but I would be good to have an expert opinion on this. (because it seems strange that a 4,178 bytes gif cause this problem)