eduardostuart / vue-image-loader

🌟 Async image loader plugin for Vue.js

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Cannot put vue js variables

WolfDan opened this issue · comments

I try put functions or variables on the src route but all is recognized like a string,

How I can pass vue js variables or functions at src attribute?

Sorry I'm not native english speaker

Thanks, WolfDan.

I'll take a look today.

You're welcome, I hope can be solved :D Is the best loader I found ^^

Hi Wolfan,

Everything is working as expected.

Example:

<image-loader :timeout="60" :src="mysrc" alt="Awesome!"> </image-loader>
//.....
data(){
  return {
    mysrc: 'http://myimage.com'
  }
}
//....

Can you paste your code here?

Hey! look this is my code, I don't know why don't work with the v-for data, I'm using laravel ^^

<div class="news-one" v-for="blog in blogs">
                    <div class="row vertical-gutter">
                        <div class="col-md-4">
                            <a href="blog-post.html" class="angled-img">
                                <div class="img">
                                    <image-loader :timeout="10" :src="template/img/blog/@{{blog.Image}}" alt=""> </image-loader>

                                </div>
                            </a>
                        </div>
                        <div class="col-md-8">           
                            <div class="clearfix">
                                <h3 class="h2 pull-left m-0"><a href="@{{ getUrl(blog.Id, blog.Title) }}">@{{ blog.Title }}</a></h3>
                                <span class="date pull-right"><i class="fa fa-calendar"></i>@{{blog.Date | date}}</span>
                            </div>                
                            <div class="description">
                                <p v-html="blog.Text | truncate '200'"></p>    
                                <a href="@{{ getUrl(blog.Id, blog.Title) }}" class="read-more">See More <i class="fa fa-angle-right"></i></a>       
                            </div>                             
                        </div>
                    </div>
                </div>