I am trying to render an image inside v-for, but I can only catch it as a string.
<tr
class="bg-gray-100 border-b border-gray-200"
v-for="currentView in getDashboard()"
:key="currentView.id"
>
<td class="px-4 py-3">
<img :src=" {{currentView["avatarUrl"]}}" width="40px" />
</td>
{{currentView["avatarUrl"]}} is an object and this index contains the avatar images. Using the img tag this way is showing syntax error. By other means, how can I access v-for, for an object inside img source tag.
This is my suggestion. Using the v-bind for the src. I am assuming the avatar image is stored in the img folder. I removed the width because it seems that it will not display if the width setting is there.
<tr
class="bg-gray-100 border-b border-gray-200"
v-for="currentView in getDashboard()"
:key="currentView.id"
>
<td class="px-4 py-3">
<img
:src="require(`../img/${currentView.avatarUrl}`)"/>
</td>
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 trying to style my {block:Photo} styles in Tumblr, so that each time a photo is posted, it will cycle through a selection of, for instance, 5 slightly different classes for displaying the picture.
An example of such can be found here (where each photo table has a unique max-width property): http://www.nontemporary.com/
The code I've come up with so far, having made ample use of the Chrome inspector is thus:
{block:Posts}
{block:Photo}
<li class="post photo">
<table width="100%" align="left" valign="top" cellpadding="0" cellspacing="0">
<tbody>
<tr class="postspace">
<td></td>
</tr>
<tr class="postrow">
<td class="postdistrict">
<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" align="left" valign="top" class="post1">
<td>
<td class="postdistrict">
<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" align="left" valign="top" class="post1">
<td>
</tr>
</tbody>
</table>
</li>
{/block:Photo}
{/block:Posts}
Naturally, I think I'll have to create some custom classes for the widths, but my main question is really how I should go about getting Tumblr to cycle through those widths, as can be seen in the example.
Thanks!
If you want them to cycle through the classes in order (like the example does) you can utilise the fact that tumblr lets you style each number of post.
Here is an example of what you would do:
<li class="post-{block:Post1}1{/block:Post1}{block:Post2}2{/block:Post2}[...]{block:Post15}15{/block:Post15}">
This would render as
<li class="post-1">
with the 1 depending on what number post it is.
From here you can easily make classes for .post-1 through to .post-15.
If you would like something random instead, javascript/jquery will be needed.
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
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>
So, what I want to do is have a list within a cell that has items added to it and after it reaches a certain height, stop it and have a scroll bar appear. How can I create a td with a fixed height? So far I have:
<tr>
<td valign='top' height="200px" border="1">
<ul id="travelList" align='left'></ul>
</td>
</tr>
I would put your <ul> inside a div that has overflow auto and max-height. Like this:
<tr>
<td valign="top" border="1">
<div style="overflow:auto;max-height:200px">
<ul id="travelList" align="left"></ul>
</div>
</td>
</tr>
try adding:
style="max-height:200px"
note: not tested, but this is where you'd start, so google CSS max-height to get more detail of how heights work.