Dynamic images - evaluation of [src] in injected text


#1

I want to display blob images called in some text which comes from a dataservice.
I have this issue :

  • If I hard code the image display in the html page,
<img [src]="this.sanitizer.bypassSecurityTrustUrl(displayimage('png.png'))">

It’s fine, I get the image displayed, with this node inserted in the DOM :

<img _ngcontent-c0="" src="blob:http://localhost:8100/fd77a601-3343-4b14-b29f-0aaaf21a4d1b">
  • But that is not what I want : I want to be able to call this image form the text stored in my database, so I can insert an image where I want.
    When I try the same type of [src] inserted in the text :
"...text...<img [src]=\"this.sanitizer.bypassSecurityTrustUrl(displayimage('png.png'))\">...text..."

I have this inserted :


<img [src]="this.sanitizer.bypassSecurityTrustUrl(displayimage('png.png'))">

But it’s not evaluated…

Is there a solution?


#2

If you run your text through a pipe this might do what you’re looking for. See this thread and this thread for some examples.


#3

Try putting…

this.sanitizer.bypassSecurityTrustUrl(displayimage('png.png'))

Into a method and call the method…

showImage(){
   const sanitizedContent = this.sanitizer.bypassSecurityTrustUrl(displayimage('png.png'));
   return sanitizedContent;
}

For your html…

<img [src]="showImage()" />

Also I’d be interested to know what displayimage('png.png') brings back. Is it bringing a blob or base64 string?


#4

I tried with the pipe, but I still have the same issue : it works if it is hard coded, i.e. in page.html

<div [innerHTML]="unsafeString | safe:'html'"></div>

is OK, but if this same command is included in the text in the database, it’s not evaluated…

Perhaps I have to build a pipe for my whole text, with regex to find displayimage(*), get it evaluated and replaced in text before showing it ??


#5

Help us help you - do a repo.


#6

I 'm still a beginner and don’t really know how to build a repo…(I will try to make a plunkr.)

But the heart of the problem is in fact very simple :
in home.ts:

constructor{
    this.text = 'toto <div [innerHTML]="double(2)"></div> toto';
}
double(n){
   return 2*n
}

Home.html

<div [innerHTML]="double(2)"></div>   -->gives <div>4</div>
    {{text}}                         --->gives  toto<div [innerHTML]="double(2)"></div> toto

How to get my string evaluated ?


#7

It’s always safer to template out your HTML instead of injection. But for your example…

               constructor(private domSanitizer: DomSanitizer){
       this.text = this.domSanitizer.bypassSecurityTrustHtml((`toto <div>${this.double(2)}</div> toto`);
}

  text: SafeHtml;

then in your home.html

   {{html}}

This is completely dreadful however - feel you aren’t actually saying what you’re trying to achieve.


#8

Thank you so much for your help
I know it’s horrible… I’m a physics teacher trying to build an app…never got any programing lesson !

To be clearer, I have images stored in a pouchdb database, which I want to get inserted in a text, also stored in another pouchdb database .
In my text, there are things like \fig{image.pdf}, and I want that image to be inserted in the text.
So I have to call from within the text a function to get the corresponding image, which is served as a blob.
(the src path is set by pouchdb at the time the app is run, I can’t put something fixed like src=assets/image.pdf…)

I think I’m getting close… with your suggestion I get finally on screen

    toto <div>40</div> toto

I will need these tags to be inserted in the DOM…


#9

Can you send over some sample text? I have an idea but want to see it before suggesting.


#10

If it’s a blob image, you don’t need all that heavy lifting with the sanitizer. Just translate the Blob into a dataURL and make the dataURL your image source.


#11

Here is an example :

trois <span style=\"font-size: 100%; display: inline-block;\" class=\"MathJax_SVG\" id=\"MathJax-Element-2-Frame\">
<svg  width=\"3.319ex\" height=\"3.509ex\" style=\"vertical-align: -0.838ex;\" viewBox=\"0 -1150.1 1429 1510.9\" role=\"img\" focusable=\"false\">
<g stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" transform=\"matrix(1 0 0 -1 0 0)\">
<use x=\"0\" y=\"-13\" xlink:href=\"#STIXWEBMAIN-221A\"></use>
<rect stroke=\"none\" width=\"500\" height=\"60\" x=\"928\" y=\"901\">
</rect><use x=\"928\" y=\"0\" xlink:href=\"#STIXWEBMAIN-32\"></use>
</g></svg></span> forces concourantes \fig{forces.png}. Elles s'annulent donc.

This is Latex rendered by mathjax. I can easily replace \fig{} by anything, but that is forces.png that need to be evaluated by ionic :

The more I think about it, the more I believe I have to make a regex and replace the \fig{image} with <img [src]="blob:http://localhost:8100/67ebedc2-bb98-4cc8-b2a6-84eca514780d"> in my text before showing it with

<span [innerHTML]="sanitizer.bypassSecurityTrustHtml(text)"></span>

. : I want ionic to both inject my SVG and HTML tags, and compile at the same time something like a getImage() function. Its seems impossible ?


#12

Thanks, but that’s not the issue. My problem is about having what I would call an angular template compilation, but in the .ts file…


#13

I still like my approach better. Instead of sanitizing, you could use one of the Angular MathJax directives that are floating around. Take the formula data and render inside Angular. Translate the images to dataURLs. Let Angular do the rendering, instead of trying to force Angular to accept rendering done somewhere else.


#14

Actually, I just looked on npm, and you could import the official mathjax package, and use that to render.


#15

You cannot inject [whatever] from non-template sources, they’ll not be evaluated.

I might try later on making use of mathjax directly within an ionic app, then you’re just passing formulae instead.

I know it’s a different approach but gotta be the one.


#16

I gave up this idea at the beginning of the project because I was afraid Mathjax was too slow to render on device if you have many equations.
I just saw a demo in a standard browser on my computer : rendering could take up to 5 seconds… so I switched to mathjax-node to precompile the SVG… big work for me, I don’t want to throw it away !

And anyway, in my text, there can be structure tags like <p> <ul>... so even if I give up SVG the problem remains the same in my mind.


#17

I finaly made it !

in html :

<span [innerHTML]="sanitizer.bypassSecurityTrustHtml(text)"></span>

in ts :

this.text =  `toto <img src=${this.displayimage('png.png')}> toto`;

displayimage returns a string like

blob:http://localhost:8100/6eaf7cfa-ac46-4203-87ff-ef65256f47ee

Thank you again !