I can't see my image icon changing! Help me please

1

Eror
Eror1366Ă—736 97.7 KB

2

Can you share a link to the JSBin?

1 Like
3

You’re referring to an asset with a relative url which won’t work in JS Bin. JS Bin does support user-uploaded assets, but only for pro users, and the big green box in the middle of the screen shows you are not one of those :wink:

1 Like
4

I don’t know how to share the link but I think It may be some problems with my laptop or browser
See below in website w3schools the code work.
but in my laptop not working (same code)!

Notshowingimage
Notshowingimage1366Ă—736 64 KB

5

From w3schools.com .I can see but in my js bin I can’t see

SameCode
SameCode1366Ă—736 89.7 KB

6

Thats because sqpurple.gif is hosted on w3schools.
https://www.w3schools.com/cssRef/sqpurple.gif

It doesn’t exist on js bin, so it can’t load there.

7

Yeah. So,I should find the url which is vaild with JS bin right?
and again where can I find the preferable url for JS bin?Thanks for your attention.

8

JS bin is primarily for JS, not image hosting. Though, like I said, pro users can host images there (if you pay). And JS bin isn’t going to have the same images as w3schools, so there won’t be an exact equivalent.

But just for messing around, you can pull from w3schools using an absolute url. This is in bad form because you’re effectively stealing the image from another site, it shouldn’t be a big deal if you’re just messing around:

list-style-image: url(https://www.w3schools.com/cssRef/sqpurple.gif);

Note that some sites will restrict cross-site linking like this, so it won’t work everywhere for all images.

Otherwise you’ll want to make sure that you host your images where you’re running your code. Granted this isn’t always possible like with JS bin, so an absolute url like above can be an alternative.

Another alternative is to encode the image into a string. This only works for small images (large images become unmanageable) so with what you’re doing, its a great use case. To convert an image to a string you can use a service like https://www.base64-image.de/. Just upload the image and you’ll get a string you can use in place of the image url.

list-style-image: url(data:image/gif;base64,R0lGODdhCQAJAKEAAO6C7v8A/6Ag8AAAACwAAAAACQAJAAACFISPaWLhLhh4UNIQG81zswiGIlgAADs=
);

This url doesn’t depend on w3schools at all. All the image information is in the css.

2 Likes
9

Well explained. Thanks for caring me. I’m absolute beginner and just dive in to HTML and CSS before a few weeks( come from zero level).I will note all of your explanations and I’ll try as much as I can.

1 Like