SVG not displaying properly in Node.js

Recently switched over from Django to Node.js and my svg html isn't loading properly, all other static files seem to be fine.

Here you can find my html:

<svg class="svg-features-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
   <path position="fixed" d="M55,0 L68,35 Q72,45 80,40 L100,30 100,0 Z" fill="#2b016d"/>
</svg>  

background image in css that I'm trying to vector:

.section--intro{
    min-width:100%;
    height:100%;
    -webkit-background-size: 100%; 
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover; 
    background-size: cover;
    background-position:center bottom;
    background-image:url(images/bg.jpg);
    position:relative;
    overflow:hidden;
}

The background image isn't loading at all, and I would really appreciate any help I can get

1 answer

  • answered 2018-08-17 11:44 steppefox

    Probably, you don't serve your static files (images in this case) properly with Node.js. When you are trying to get images for example like: /images/bg.jpg, here is what happening:

    • Your browser makes a request to the server
    • Your server (or web application) accepts the request and should explicitly know what to do with it. Otherwise, it returns 404.

    If you are using Express as your Node.js framework, you can tell your Node.js to handle such requests very easily:

    const path = require('path');
    app.use('/images', express.static(path.join(__dirname, 'images')))
    

    Also, you can check the docs here: https://expressjs.com/en/starter/static-files.html

    After that, your Node.js app should be able to return image content for any /images/ requests. If you use a different framework for your app, it's not a problem, you just need to find the right hint in the docs, search by keywords like: static files or serve files

    PS. SVG images content is not HTML, but XML