Develop Reference

Vue Render Images inside V-for

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>

anchor tag is not working with image http://www.smoothdivscroll.com/demo.html

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

A base64 image in svg does not display at the first time

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

html <object data> using a non link to navigate to a page I click on from a page with multiple pages

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.

HTML email template solution to javascript link in table TD?

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>