Why does Html doesn't display express sent image?-CodePudding

I've got a remote server running a server express that returns a tiger image on the link.

On this link, there is an express server running:

var express = require('express');
var app = express();
app.use(cookieParser())
app.use(cors())
app.use(helmet())
app.use(express.urlencoded({ extended: true, limit: '10mb' }))
app.set('view engine', 'ejs');
const router = require('express').Router();
app.use(express.static('public'));


router.get('/lookforit/:id',(req, res) =>{
    res.sendFile(__dirname '/public/images/' req.params.id)
})

app.listen(PORT, function () {
    console.log('Server is running on PORT',PORT);
});

And I have the tiger image named tiger.jpg on the /public/images.

Indeed, The link returns an image as expected.

But when trying to insert it into HTML, In an incomprehensible way, HTML doesn't display it:

<!DOCTYPE html>
<html>
<body>


<img
src="https://pub.streetzer.fr/upload/lookforit/tiger.jpg"
alt="Tiger"
/>

</body>
</html>

Can someone tell what's missing please?

CodePudding user response：

When I try to run your live demo, the following is displayed in my developer tools console:

The resource at “https://pub.streetzer.fr/upload/lookforit/tiger.jpg” was blocked due to its Cross-Origin-Resource-Policy header (or lack thereof). See https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)#

app.use(helmet()), has set a Cross-Origin-Resource-Policy that forbids the image being embedded across origins.