Question

最近从Django切换到Node.js，并且我的svg html无法正确加载，所有其他静态文件似乎都很好。

在这里您可以找到我的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>

我要引导的CSS背景图像：

.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;
}

背景图片根本没有加载，我将非常感谢我能提供的任何帮助

Answer 1

可能是由于Node.js无法正确提供静态文件（在这种情况下为图像）。当您尝试获取诸如/images/bg.jpg之类的图像时，发生的事情是

您的浏览器向服务器发出请求
您的服务器（或Web应用程序）接受请求，并应明确知道如何处理该请求。否则，它将返回404。

如果您将Express用作Node.js框架，则可以告诉Node.js非常轻松地处理此类请求：

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

此外，您可以在此处查看文档：{{3}}

此后，您的Node.js应用程序应该能够为任何/images/请求返回图像内容。如果您为应用程序使用其他框架，那不是问题，您只需要在文档中找到正确的提示，并按诸如static files或serve files

的关键字进行搜索

PS。 SVG图片内容不是HTML，而是XML

SVG在Node.js中无法正确显示

1 个答案: