Styles from CDN Not Applying

[jaredforth]

I have followed the documentation exactly to set up the viewer.

I am loading CSS and JS from the CDN:

<link type="text/css" href="https://unpkg.com/image-compare-viewer/dist/image-compare-viewer.min.css">
<script src="https://unpkg.com/image-compare-viewer/dist/image-compare-viewer.min.js"></script>

My HTML is structured:

<div id="image-compare">
    <img src="/uploads/car1.jpeg" alt="" />
    <img src="/static/uploads/car2.jpeg" alt="" />
</div>

My JS:

<script>
    const element = document.getElementById("image-compare");
    const viewer = new ImageCompare(element).mount();
</script>

However, the result looks like this:

It seems that the CSS is not being loaded from the CDN. Why would this be the case?

[kylewetton]

Bizarre! I'll read up about whats happened here, but it looks like type="text/css" isn't working in this case,

Change this <link type="text/css" href="https://unpkg.com/image-compare-viewer/dist/image-compare-viewer.min.css">

To this (notice that we're changing it to rel="stylesheet")

<link rel="stylesheet" href="https://unpkg.com/image-compare-viewer/dist/image-compare-viewer.min.css">

I think it might have something to do with unpkgs redirection setup

[lucacataldo]

Just a heads-up that this issue is still happening. Maybe it'd be best to change the README to use rel="stylesheet" since copying the snippet from there and following the docs yields this exact issue

[netpyoung]

and one more thing error on document is querySelectorAll

for query ion d is querySelectorAll("#id")

for query on class is querySelectorAll(".class")

[alt9800]

I was suffering from the same issue, applied and it worked fine! Thanks!