I'm trying to display a raw HTML webpage with an image that is stored locally on server in my network.
module.exports = `
<html>
<img src="file://thisLocalServer/image.jpg" />
</html>`
When I try to display this image however, it displays the default blank placeholder image. This is my App.js file.
var __html = require('./html.test.js');
var template = { __html: __html}
render() {
return(
<span dangerouslySetInnerHTML={template}/>
);
If I try setting the image source as a normal link like https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png then it appears to work fine.
To fix this download the image, put it in the folder with the index.html or a subfolder with the index.html and put the following link:
<img src="foldername/image-name.format">
Or via javascript:
document.location.pathname + '/foldername/image-name.format';
In short, with the code above, no image will ever be shown.
Details:
There are several issues with the src attribute of the <img> tag.
src is not recommended to use file:// protocolfile:///filesystem/path/to/img.jpgBut in my exp, even you fix the 2nd one, your image will not load because of the 1st one. This is a security reach if the access to a webpage (through http or https protocol) is able to know the filesystem of the server.