I’ve been messing around in Javascript to try and get more experience dealing with a server and API implementation. This site runs off a Node.JS server and uses the Spotify API to retrieve user’s listening statistics for the creation of trading card images. For styling the cards, I want to implement ColorThief to grab a palette from the cover artwork. However, I am struggling to get so far as to even test out the API. I am receiving this error in the console when starting the site:
Failed to load resource: the server responded with a status of 404 (Not Found) color-thief.mjs:1
By my checks, it looks like it should work to me? I’ve declared the scripts file as a module in the index.html, declared the import for ColorThief, and handled the loading time wait in the test function, but no tweaks I’ve tried so far has helped. The error points toward a resource not being found, but I’ve changed around the file path in the import with change, and the image it is testing on is just ripped from the web for now. Below are the relevant code segments, and I’ll link the gitHub repo as well.
<script type="module" src="script.js"></script>
import ColorThief from './node_modules/colorthief/dist/color-thief.mjs'
const colorThief = new ColorThief();
const imgURL = 'https://media.pitchfork.com/photos/61649694110e7cd222907396/1:1/w_450%2Cc_limit/Black-Country-New-Road.jpg';
if (img.complete) {
colorThief.getColor(url(imgURL));
} else {
image.addEventListener('load', function() {
colorThief.getColor(url(imgURL));
});
}