Base64 Images converting - why?

Question

I have a list of png's I'm referencing in my css like so:

.nav-questions:before {
        background: url('../../../assets/images/nav-icons/question-list-icon-grey.png') no-repeat;
        width: 25px;
        height: 19px;
    }

Some of the images render and some do not and I can only put this down to seeing differences within developer tools. The images that do render, have base64 encoding but how is this possible or why aren't the other images rendering?

See screenshot examples:

Base64

Non base64

Answer 1

The images are physically present, but that's not how you request them. When you develop a website, the browser connects to a server, and that server sends assets : HTML pages, CSS files, and images. Browsers don't allow direct access to the user's file system, that would be a terrible security flaw. They only access whatever resource the server is willing to send. So you need to set up a server and connect to it via localhost:port in your browser. The server will then serve the images (you'll have to write this part as well, of course).