I have a NodeJS.Readablestream which is a png image
How do I append it to dom? I'm trying to do this in the browser. I can't just add it to the <img> since it only has src="" which is supposed to be an url.
Related
In markdown, I would like to embed a base64 image data uri.
Is there any way to resize the rendered image in markdown?
As per this answer, it is allowed and encouraged to use HTML within markdown. So you can embed and resize a base64 image using the img tag in HTML by adding the data uri in the src attribute as follows.
<img width="20" height="15" src="data:image/jpeg;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>
I am trying to embed an image inside HTML which is generated by an azure function. when I run it in localhost I am able to see the image, but when I convert that to an azure function it throws a broken thumbnail image.iam using matplotlib to save the plot
plt.savefig(f'{basepath}/plot.png')
this will save it to a temporary path and then I am using it inside my HTML content
<div class="image">
<img src="""f'../{basepath}/plot.png'""">
</div>
on inspecting the page also iam able to see the correct path, though not the image
converting the image to a base encoded version
encoded = base64.b64encode(tmpfile.getvalue()).decode('utf-8')
and calling that inside the HTML worked for me
<img src="""f'data:image/png;base64,{encoded}'""">
I include some small images in my Gatsby website. The resulting html uses base64 strings which is fine. For some reason Gatsby includes exactly the same base64 image strings in component---src-pages-index-js-89ae02357f7d97fc84f9.js.
<a key={i} rel="noopener noreferrer" target="_blank" href={"http://www.webworkers.io"}><img
alt={`${i} logo`}
src={require(`./${i}.png`)}/></a>
Can I change this behaviour ?
I am fairly new to web scraping and trying to scrape a website using Beautifulsoup4 and requests in Python. The page contains one main image and other small alternate images.
While inspecting the required main img tag through browser, the src attribute is a valid url but while fetching the same page through python requests, the src attribute comes as a base64 string. Something like this
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv ...
src attribute of all other alternate images is coming in proper url form. The problem is only with main image. Is there a way to get the actual url displayed in browser instead of this base64 string ?
I found out a competitor of mine copied my webpage and in the process hotlinked an image on his page - he probably just copy/pasted from the browser.
I know how to handle hotlinking, but I want to attempt a better version of it: I want to replace the http://www.mysite.invalid/image.jpg on his page with html code using htaccess so when his page with the html
<img src="http://www.mysite.invalid/image.jpg" />
would be replaced by
dontstealbandwidth.jpg"/> this image steals bandwidth from mysite.invalid<img src="dontstealbandwidth.jpg
The result in his page would then be
<img src="http://www.mysite.invalid/dontstealbandwidth.jpg"/> this image steals bandwidth from mysite.invalid<img src="dontstealbandwidth.jpg" />
I tried to redirect the image to an html file. Directly accessing the image on my site will show the content of the html file. However this does not seem to work on images inside html code.
Is this at all possible? It feels like it shouldn't be but it would be cool if it would be.
Is it at all possible to do this?
When a browser is requesting image data then you cannot return HTML text in response. You can of course make a custom image named /dontstealbandwidth.jpg with your HTML text embedded in it and redirect /image.jpg to /dontstealbandwidth.jpg using simple redirect rule like this:
RedirectMatch 301 ^/image\.jpg$ /dontstealbandwidth.jpg