CODEWITHSUNDEEP
htmlcssnode.jssvg
Rick .J
Rick .J

Reputation: 1

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

Upvotes: 0

Views: 2306

Answers (1)

steppefox
steppefox

Reputation: 1844

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

Upvotes: 1

Related Questions