Vue js dynamic images not working

Question

I have a case where in my Vue js with webpack web app  I need to display dynamic images  I want to show img where file name of images are stored in a variable  That variable is a computed property which is returning a Vuex store variable  which is being populated asynchronously on beforeMount    lt div class  col-lg-2  v-for  pic in pics  gt      lt img v-bind src      assets     pic     png   v-bind alt  pic  gt   lt  div gt    However it works perfectly when I just do    lt img src     assets dog png  alt  dog  gt    My case is similar to this fiddle  but here it works with img URL  but in mine with actual file paths  it does not work   What should be correct way to do it

User · Answer

You can try the require function  like this    lt img  src  require    xxx   name  png    alt class  icon    gt

User · Answer

lt img src  quot    assets graph selected svg quot   gt   The static path is resolved by Webpack as a module dependency through loader  But for dynamic path you need to use require to resolve the path  You can then switch between images using a boolean variable  amp  ternary expression   lt img  src  quot this graph   require      assets graph selected svg      require      assets graph unselected svg    quot  alt  quot  quot  gt   And of course toggle the value of the boolean through some event handler

User · Answer

Tried all of the answers here but what worked for me on Vue2 is like this   lt div class  quot col-lg-2 quot  v-for  quot pic in pics quot  gt      lt img  src  quot require     assets   pic imagePath  png   quot   alt  quot pic picName quot  gt   lt  div gt

User · Answer

Vue js uses vue-loader  a loader for WebPack which is set up to rewrite convert paths at compile time  in order to allow you to not worry about static paths that would differ between deployments  local  dev  one hosting platform or the other   by allowing you to use relative local filesystem paths  It also adds other benefits like asset caching and versioning  you can probably see this by checking the actual src URL being generated   So having a src that would normally be handled by vue-loader WebPack set to a dynamic expression  evaluated at runtime  will circumvent this mechanism and the dynamic URL generated will be invalid in the context of the actual deployment  unless it s fully qualified  that s an exception   If instead  you would use a require function call in the dynamic expression  vue-loader WebPack will see it and apply the usual magic  For example  this wouldn t work   lt img alt  quot Logo quot   src  quot logo quot    gt   computed        logo             return this colorMode      dark                      assets logo-dark png                      assets logo-white png            While this would work   lt img alt  quot Logo quot   src  quot logo quot    gt   computed        logo             return this colorMode      dark                   require    assets logo-dark png                    require    assets logo-white png             I just found out about this myself  Took me an hour but    you live  you learn  right

User · Answer

Here is a shorthand that webpack will use so you don t have to use require context   HTML    lt div class  col-lg-2  v-for  pic in pics  gt       lt img  src  getImgUrl pic   v-bind alt  pic  gt   lt  div gt    Vue Method   getImgUrl pic        return require     assets   pic      And I find that the first 2 paragraphs in here explain why this works  well   Please note that it s a good idea to put your pet pictures inside a subdirectory  instead of lobbing it in with all your other image assets  Like so    assets pets

User · Answer

I encountered the same problem   This worked for me by changing     assets   to    assets       lt img v-bind src     assets     pic     png   v-bind alt  pic  gt

User · Answer

There is another way of doing it by adding your image files to public folder instead of assets and access those as static images    lt img  src    img     pic     png   v-bind alt  pic   gt    This is where you need to put your static images

User · Answer

Here is Very simple answer   D   lt div class  col-lg-2  v-for  pic in pics  gt      lt img  src      assets   pic  png    alt  pic  gt   lt  div gt

User · Answer

You can use try catch block to help with not found images  getProductImage id              var images   require context    assets    false     jpg              let productImage                try               productImage   images    product  id  jpg               catch  error                productImage   images    no image jpg                         return productImage

User · Answer

I also hit this problem and it seems that both most upvoted answers work but there is a tiny problem  webpack throws an error into browser console  Error  Cannot find module    undefined  at webpackContextResolve  which is not very nice   So I ve solved it a bit differently  The whole problem with variable inside require statement is that require statement is executed during bundling and variable inside that statement appears only during app execution in browser  So webpack sees required image as undefined either way  as during compilation that variable doesn t exist    What I did is place random image into require statement and hiding that image in css  so nobody sees it       template  lt img class  user-image-svg   class   this hidden   hidden          src  userAvatar  alt   gt     js data       return       userAvatar  require    assets avatar1 svg        hidden  true          css  hidden  display  none    Image comes as part of information from database via Vuex and is mapped to component as a computed  computed      user         return this  store state auth user          So once this information is available I swap initial image to the real one  watch      user userData        this userAvatar   require    assets   userData avatar         this hidden   false

User · Answer

I got this working by following code    getImgUrl pet        var images   require context     assets    false     png        return images        pet     png         and in HTML    lt div class  col-lg-2  v-for  pic in pics  gt      lt img  src  getImgUrl pic   v-bind alt  pic  gt   lt  div gt    But not sure why my earlier approach did not work

User · Answer

well the best and easiest way that worked for me was this of which i was fetching data from an API    methods           getPic index        return this data response user Image path   index           the getPic method takes one parameter which is the name of the file and it returns the absolute path of the file maybe from your server with the file name simple     here is an example of a component where i used this    lt template gt       lt div class  view-post  gt           lt div class  container  gt        lt div class  form-group  gt                lt label for    gt  lt  label gt                lt input type  text  class  form-control  name    id    aria-describedby  helpId  placeholder  search here  gt                lt small id  helpId  class  form-text user-search text-muted  gt search for a user here lt  small gt              lt  div gt              lt table class  table table-striped   gt                  lt thead gt                      lt tr gt                          lt th gt name lt  th gt                          lt th gt email lt  th gt                          lt th gt age lt  th gt                          lt th gt photo lt  th gt                      lt  tr gt                      lt  thead gt                      lt tbody gt                          lt tr v-bind key  user data get id   v-for  user data get in data response data  gt                              lt td scope  row  gt    user data get username    lt  td gt                              lt td gt    user data get email    lt  td gt                              lt td gt    user data get userage    lt  td gt                              lt td gt  lt img  src  getPic user data get image    clas  img resize  style  height 50px width 50px    gt  lt  td gt                          lt  tr gt                       lt  tbody gt              lt  table gt           lt  div gt        lt  div gt   lt  template gt    lt script gt  import axios from  axios   export default        name   view     components            props   url     data          return            data response              image path                 methods           getPic index        return this data response user Image path   index           created          const res data   axios       method   post       url  this url link   view      headers         Authorization   this url headers Authorization        content-type  this url headers type                   then  response   gt              handle success       this data response   response data        this image path   this data response user Image path         console log this data response data              catch function  response              handle error         console log response                  lt  script gt     lt style scoped gt    lt  style gt

User · Answer

Your best bet is to just use a simple method to build the correct string for the image at the given index   methods      getPic index        return     assets     this pics index      png           then do the following inside your v-for    lt div class  col-lg-2  v-for   pic  index  in pics  gt      lt img  src  getPic index   v-bind alt  pic  gt   lt  div gt    Here s the JSFiddle  obviously the images don t show  so I ve put the image src next to the image    https   jsfiddle net q2rzssxr

[javascript] Vue.js dynamic images not working

Examples related to javascript

Examples related to html

Examples related to vue.js

Examples related to vuejs2