Gatsby replace image by base64 string in html but still serves it in javascript - base64

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 ?

Related

how can i store html tags in mongo data base and display in ejs

I have post my html elements to data base like this
<article>
<h1> <span> text editors</span></h1>
<h2>برامج بنستخدمها عشان نكتب الكود بتاعنا وفي اضافات كتيرة بتسهل الشغل بتاعنا -</h2>
<h2>
<a target=_blank href="https://atom.en.uptodown.com/windows">Atom</a> وتاني برنامج هو <a target=_blank href="https://code.visualstudio.com/download">VS Code</a> عندك برنامجين حلويين جدا اول برنامج -
</h2>
<h2><a target=_blank href="https://code.visualstudio.com/download">للتحميل اضغط هنا</a> VS Code في الشرح بتاعنا هنستخدم -</h2>
<h2>زي الفيديو وبعد نفتح البرنامج عادي install بعد كدا هنعمل -</h2>
</article>
and I have get these data to my website. I need away to display the html in ejs. I tried many things but nothing works. I tried to dom-parse and it returns one element.
It's not a good idea to store complete elements in your DB, cause you might need to change the styling or the structure later.
What you can do instead, is store the data inside each of the tags in your DB, fetch the data when your site loads, and then add it to the elements.

NodeJS.Readablestream to DOM?

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.

Image not Loading in HTML file generated by azure function

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}'""">

How to render elasticsearch json info as clickable links with Vue.js

Hey there folks :) I am trying to set up a search engine with elasticsearch/node.js, express and vue.js. I would like the search results to be clickable links, but they are only returning non-clickable html. I have tried adding normal html A- tags to the .json file, but on the front end this renders as a non clickable html text and not as a clickable link. Any suggestions would be really appreciated
this is what I have tried, just as a test:
Visit our HTML tutorial
I have had a look on google for possible solutions but all I could find were references to the normal html a-tag and that both j.son and vue.js can take those?
If I correctly get the issue, At FE your link get rendered as sting which is Google . You need to use v-html in this case to tell element to render the passed value as html not as string
//Suppose you have this vue data prop
let url = Google
Now In you html part Just use v-html to render
<div class="foo">
<template v-html="url" />
</div>

how to convert text with html tag into DOM in express nodejs bootstrap

I have a text output from DB with formatted with HTML tags.
<p>Some text</p><ul><li>some 1</li></ul>
Now In the browser when I display the result. the HTML tags not converted into DOM.
I tried to replace <> with < > Still not working.
I am using nodejs in back and using bootstrap in view

Resources