I'm developing a hybrid application using cordova.
For some reason, I need to save an SVG image in witch there is a base64 image and some text in my SQLite. I saved the text of SVG source in a format like this:
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" style="margin-top:5px;text-align:center" class="ng-scope">
<foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" style="width: 390px;height: 290px;background-color: #2B6E44;padding: 4px">
<table style="width:100%;height:100%;border-collapse:collapse;border:2px solid white;color:white;font-size:1em">
<tbody>
<tr>
<td colspan="2">
<div class="forImg" style="height:100%;width:50%;float:right">
<img ng-src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAZAAA/+4ADkFkb2JlAGTAAAAAAf/.............
..........................................
L0JEX//Z" style="display:block;max-width:180px;max-height:170px;width:auto;height:auto;" />
</div>
</td>
</tr>
</tbody>
</table>
</foreignObject>
</svg>
but when I get this value from database and set it as the src of img like this:
JS:
$scope.blackboard.svgSource = "data:image/svg+xml;utf8," + res.rows.item(i).svg_source;
HTML:
<img ng-src="{{blackboard.svgSource}}"/>
the table in SVG will display normally, but the base64 image will not show until it has been display once in the other pages (there is a page of all the pictures can put into the SVG).
As the image in the SVG can be shown after it has been showed in another page, the base64 data is right I think.
But why can't it show in the first time?
Any help is appreciated!
I'm sorry to ask this question which now I solved by myself.
It seems not good to use SVG, which has a base64 image in it, in the src attribute of <img>.
I finally found that the ng-bind-html directive in angularJS is really fit for my situation, which can create in-line SVG. And in this way, the base64 image will display at the first time.
If you have an interest in this question, please take a look at this:AngularJS : Insert HTML into view
Related
I have a project where I fetch HTML code that may include img tags with src attribute that I need to change.
Example:
<div class="WordSection1">
<p class="MsoNormal">Hej,
<o:p></o:p></p>
<p class="MsoNormal">
<tr>
<img border="0" width="160" height="36" style="width:1.6666in;height:.375in" id="Bildobjekt_x0020_5" src="https://api-na1.hubspot.com/filemanager/api/v2/files/65389630830/signed-url-redirect?portalId=457458" alt="IPM Ulricehamn" data-file-id="65389630830" data-original-src="cid:image001.jpg#01D818D5.2CBCEFF0">
</tr>
<tr style="height:7.5pt">
<td style="padding:0cm 0cm 0cm 0cm;height:7.5pt"></td>
</tr>
</div>
In my code I use the html like this:
<p dangerouslySetHtml={{__html: HTML}} />
I need to access all img tags in the code to change the src due to hubspot API images is locked behind auth. I can authenticate from my server and get the image to upload to another host but I need to be able to change the src on all img tags, otherwise the img gets invalid because of auth.
I'm building the project in Next.JS
I am talking about the image in the second section of link on this HTML page.
and here is the link of the original image.
when you inspect the HTML page you can see, I am using the same image as the link given, and still, the hand in the image is not showing, I tried to do resizing and everything on inspect so that the hand in the image become visible but not working. I thought it is an issue of z-index but I checked everything z-index is fine, the border part of the hand is visible.
I just saw with different Mac and safari browser the image is showing up with hand but in my system, Linux, and chrome browser the image is showing up without the hand.
<div class="col-lg-4 is-animated">
<img src="assets/images/2sec.svg" class="img-fluid" alt="">
</div>
Have a try using <object> tag:
<object type="image/svg+xml" data="https://www.thealphateam.digital/demos/pando/assets/images/2sec.svg">
#Progu, Thanks for your answer, your answer was working but I started facing another problem with my javascript code, scrolling stopped working when I used an object tag to display image...
so I searched for more alternatives to display images apart from an image tag, and I found the Iframe method, it worked awesomely. but still, if someone knows why this was happening and can display it with the image tag can answer.
<iframe frameborder="0" scrolling="no" width="100%" height="100%"
src="assets/images/2sec.svg" name="imgbox" id="imgbox">
<p>iframes are not supported by your browser.</p>
</iframe><br />
Change the inline style style margin-left value.
<iframe frameborder="0" scrolling="no" width="100%" height="100%" src="assets/images/2sec.svg" name="imgbox" id="imgbox" style="margin-left: 256px;">
And also the svg width="100%" and height="auto"
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="auto" viewBox="0 0 540 471" fill="none">
actully i m trying to use anchor tag with this slider image
<div class="smallsliderdiv">
<p class="smallslider"> Top websites </p>
<div id="makeMeScrollable">
<img width="400px" height="300px" src="g1.jpg"/>
<img width="400px" height="300px" src="g2.jpg"/>
<img width="400px" height="300px" src="g3.jpg"/>
<img width="400px" height="300px" src="k1.jpg"/>
<img width="400px" height="300px" src="k2.jpg"/>
</div>
<div>
but its not working images are not getting showed when i do like this? i dont want the alternative way .. what is the problem with this slider?? last two images have no problem .. when i remove anchor tag all is fine but i need this. Thank you.
This is working fine with html but not with the slider i m using which is http://www.smoothdivscroll.com/demo.html use js and css from this site
and i am using for each loop for echoing image address and link address .
This is how I would do it, since your .js or .css slider files probably has an issue with wrapping the images with an anchor tag, so instead of wrapping the images with an anchor you can add an onclick event to the img and have the javascript link the image. and manually change the cursor to a pointer in the CSS.
See fiddle for example: https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/47/
html
<img onclick="image1()" width="400px" height="300px" src="http://lorempixel.com/400/200/"/>
CSS
#makeMeScrollable > img:hover{
cursor: pointer;
}
Javascript
function image1(){
window.location.href = 'www.google.com';
}
Right now I have 4 search pages being pulled into one page using a table and the object tag. If I click on a link anywhere with anyone of the search pages I can go to that link.
How can I go to that systems home page by clicking in an area without a link? For instance I can click on anything at Google.com and even insert my cursor into the search area, but I would like to click it so it is the only page on the screen too.
I don't want to lose the functionality of being able to click on links when multiple webpages are up..
<table style="width:100%">
<tr>
<td style="height:800px">
<object data='http://google.com' width='100%' height='100%'>
</object>
</td>
<td style="height:800px">
<object data='http://bing.com' width=100% height='100%'>
<pr>Browser won't retrieve the forecast</pr>
</object>
</td>
</tr>
<tr>
<td style="height:800px">
<object data='http://lycos.com' width=100% height='100%'>
</object>
</td>
<td style="height:800px">
<object data='http://ask.com' width=100% height='100%'>
</object>
</td>
</tr>
</table>
Why is it needed to use object tag? You can store your url in a data attribute by using simply a div and you can add a simple click eventhandler to it. When you click on it just get the stored url from the data and give it to the window.location.
This is my current code:
<td height="150" style="background: url(bg.jpg); cursor: pointer;" onClick="document.location.href='http://www.youtube.com';">
Now obviously with JavaScript this isn't likely to work in email clients (is it?). What is an HTML solution? Thanks in advance! I've tried wrapping link tags around but that doesn't seem to do the trick.
Why not just style a link to take up the width and height of the td:
<td height="150" style="background: url(bg.jpg);"></td>
Given the information you have posted (and your comment on #PAM's answer), I think this will solve your problem:
<td width="150" style="background-color:rgb(128,128,128); background-image:url('http://www.yoursite.com/yourpicture.gif'); cursor:pointer;">
<a href="http://www.youtube.com">
...Text...
</a>
</td>
I've added the background-color attribute to the td so that users have a fallback if their email client does not display background images. Of course, you should set this to a colour which is similar to the background image.
Can't you just type like that:
<td height="150"><img src="bg.jpg" /></td>