Snippet of Node.js code
app.use('/static/images',express.static(path.join(__dirname,'images')))
Folder Structure
|-root
| -images
When attempting to fetch data in my Angular6+ application, I am utilizing the following code:
this.productService.dataSubject.subscribe((val)=>{
console.log(val,"we are from Trail Zoom Component",Config.URLS.images+val['product']['imageUrl'])
this.productImg = Config.URLS.images+val['product']['imageUrl']
Upon checking my console, I can see:
{product: {…}} "we are from Trail Zoom Component" "http://localhost:3000/static/images/image-1612722550428.jpeg"
To ensure the image is present in the images folder, I checked and confirmed it is there.
However, when trying to access the image at "http://localhost:3000/static/images/image-1612722550428.jpeg", it appears encrypted.
Please refer to the link for a visual representation: https://i.stack.imgur.com/7NKBB.png
I also attempted to set headers for the image but the issue persists. Here is the modified code snippet:
app.use('/static/images',express.static(path.join(__dirname,'images'),{
setHeaders: setCustomCacheControl
}))
function setCustomCacheControl (res, path) {
res.setHeader('Content-Type','image/jpeg')
}
My additional headers:
app.use(bodyParser.urlencoded({ extended: false }))
// parse application/json
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Content-Type', 'application/json');
res.setHeader(
'Access-Control-Allow-Methods',
'OPTIONS, GET, POST, PUT, PATCH, DELETE'
);
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
if (req.method === 'OPTIONS') {
return res.sendStatus(200);
}
next();
});
app.use(bodyParser.json())