Static image src in Vue js template

Question

My Vue component contains some images  I want to do lazy-loading later  so I need to set the src of the images to a small image  first    lt template gt           lt div v-for  item in portfolioItems  gt               lt a href      item id     gt                   lt img                     data-original     item img                         v-bind src   static img clear gif                      class  lazy  alt    gt               lt  a gt           lt  div gt   lt  template gt    Gives me a bunch of errors  like       Vue warn   Invalid expression  Generated function   body    scope static scope img scope clear gif vue common js 1014 Vue       Vue warn   Error when evaluating expression   static img clear gif     TypeError  Cannot read property  call  of undefined  found in   component      webpack config js  module exports                    build            assetsPublicPath               assetsSubDirectory   static

User · Answer

declare new variable that the value contain the path of image

const imgLink = require('../../assets/your-image.png')

then call the variable

export default {
    name: 'onepage',
    data(){
        return{
            img: imgLink,
        }
    }
}

bind that on html, this the example:

<a href="#"><img v-bind:src="img" alt="" class="logo"></a>

hope it will help

User · Answer

Pantelis answer somehow steered me to a solution for a similar misunderstanding   A message board project I m working on needs to show an optional image   I was having fits trying to get the src imagefile to concatenate a fixed path and variable filename string until I saw the quirky use of      quotes  -    lt template id  symp-tmpl  gt     lt div gt       lt div v-for  item in items  style  clear  both   gt         lt div v-if   item imagefile       none     gt           lt img v-bind src    storage userimages     item imagefile  gt         lt  div gt        sub   lt span gt     item subject    lt  span gt         lt span v-if   login    item author   gt  edit  lt  span gt         lt br gt     item author           lt br gt msg   lt span gt     item message    lt  span gt       lt  div gt     lt  div gt   lt  template gt

User · Answer

This is how i solve it           items              title   Dashboard   icon  require    assets icons sidebar dashboard svg                title   Projects    icon  require    assets icons sidebar projects svg                title   Clients   icon  require    assets icons sidebar clients svg                 And on the template part    lt img  src  item icon    gt    See it in action here

User · Answer

You need use just simple code  lt img alt  quot img quot  src  quot    assets index png quot    gt  Do not forgot atribut alt in balise img

User · Answer

If you want to bind a string to the src attribute  you should wrap it on single quotes    lt img v-bind src    static img clear gif   gt   lt  -- or shorthand -- gt   lt img  src    static img clear gif   gt    IMO you do not need to bind a string  you could use the simple way    lt img src   static img clear gif  gt    Check an example about the image preload here  http   codepen io pespantelis pen RWVZxL

User · Answer

This solution is for Vue-2 users   In vue-2 if you don t like to keep your files in static folder  relevant info   or In vue-2  amp  vue-cli-3 if you don t like to keep your files in public folder  static folder is renamed to public    The simple solution is     lt img src  quot   assets img clear gif quot    gt     just do this   lt img  src  quot require    assets img clear gif   quot     or do this   lt img  src  quot require    assets img   imgURL    quot     if pulling from  data    return  imgURL   clear gif     If you like to keep your static images in static assets img or public assets img folder  then just do   lt img src  quot   assets img clear gif quot    gt   lt img src  quot  assets img clear gif quot    gt     in some case without dot

[javascript] Static image src in Vue.js template

Examples related to javascript

Examples related to webpack

Examples related to vue.js