Vue.js - change undefined img source that I have created dynamically

Question

I am playing around with vue js and with a 3rd party API. I have succeeded in fetching the json data and presenting it in my html but I am struggling with the images. Some images are missing from the json file so i have stored them locally in my laptop.

I have tried to set empty images source using v-if in my html without luck. (see the comments in my html file)

Also I have tried to assign a class for every img and then I tried to set an img source using jquery $("#zTTWa2").attr("src", "missing_beers-logo/11.5%20plato.png"); without luck as well.

Where is my fault? Maybe my approach is totally wrong because I am new in coding and any suggestion will be appreciate. Thank you in advance

var app = new Vue({
  el: "#app",
  data: {

    beers: [],
    decrArray: [], //array with img links
    cleanedArray: [], //without undefined
    path: 0,
    images: [missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png",
    "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png",
	"missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png"],
  created: function() {
    this.getData();
  },

  methods: {
    getData: function() {
      var fetchConfig =
        fetch("http://api.brewerydb.com/v2/beers?key=6a3ac324d48edac474417bab5926b70b&format=json", {
          method: "GET",
          dataType: 'jsonp',
          //                     responseType:'application/json',
          // "Content-Type": 'application/json',


          headers: new Headers({
            "X-API-Key": '6a3ac324d48edac474417bab5926b70b',
            'Content-Type': 'application/json',
            "Access-Control-Allow-Credentials": true,
            "Access-Control-Allow-Origin": '*',
            "Access-Control-Allow-Methods": 'GET',
            "Access-Control-Allow-Headers": 'application/json',



          })
        }).then(function(response) {
          if (response.ok) {
            return response.json();
          }
        }).then(function(json) {
          console.log("My json", json)
          //                    console.log("hi");
          app.beers = json.data;
          console.log(app.beers);
          app.pushDescr();
          console.log(app.decrArray);
          app.removeUndef();
          //					console.log(app.cleanedArray);
        })
        .catch(function(error) {
          console.log(error);
        })
    },

    pushDescr: function() {
      console.log("hi");
      for (var i = 0; i < app.beers.length; i++) {
        app.decrArray.push(app.beers[i].labels);
      }


      return app.decrArray;
    },

    removeUndef: function() {
      for (var i = 0; i < app.decrArray.length; i++) {
        if (app.decrArray[i] === undefined) {
          app.decrArray[i] = "";
        }
      }
      console.log(app.decrArray);
    },
     getMissingImg(index){

   return(this.images[index]);
  },





  }
})

  <div class="app">
    <div v-for="(value, index) in beers">
      {{value.name}}
      <!--
            	      
   <img  v-bind:src="decrArray[index].medium" :class="value.id"/>        	         	
-->
      <div v-if="decrArray[index].medium !==undefined  ">
        <img :src="decrArray[index].medium" />
      </div>
      <div v-else>
        <img :src="getMissingImg(index)" />
      </div>

    </div>



  </div>

If you use : in <img :src=""> then the string is treated as a variable. It should just be <img src="./beer.jpg">. And then you have to check if the path to the image is correct, by opening the browser inspector. — Kokodoko
– Kokodoko, Commented Dec 30, 2018 at 14:56
@Kokodoko Thank you very much for your assist. Do you mean that the if/else statements should be something like that? <div v-if="decrArray[index].medium !== "" "> <img :src="decrArray[index].medium"/> </div> <div v-else> <img src="missing_beers-logo/11.5%20plato.png"/> </div> — Ioan Dimi
– Ioan Dimi, Commented Dec 30, 2018 at 15:08
Paths are correct because i can see the image in brackets also if i change order happened the same i can see only the 1st position in the list... — Ioan Dimi
– Ioan Dimi, Commented Dec 30, 2018 at 16:33
Something is going wrong with the if/else statements because when i try this <img v-bind:src="getMissingImg(index)"/> i can see every img that i have in my array — Ioan Dimi
– Ioan Dimi, Commented Dec 30, 2018 at 17:40

Boussadjra Brahim · Accepted Answer · 2018-12-30 16:24:46Z

2

Using webpack local images are considered like modules so you should require or import them like :

 <img :src="localImg" />

and in your data object you should have :

 data(){
       return{
          localImg:require("missing_beers-logo/11.5%20plato.png"),
          ...
          }
       }

or

import img from "missing_beers-logo/11.5%20plato.png"
 export default{

  data(){
       return{
          localImg:img,
          ...
          }
       }

if you've an array of images i recommend to use a method like :

  <div v-else>
    <img :src="getMissingImg(index)" />
  </div>

data:

images: ["missing_beers-logo/420%20fest.jpg","missing_beers-logo/15th%20aniversarry.png","missing_beers-logo/15th%20aniversarry.png","missing_beers-logo/3%20Weight%20beer%20.png"]

and your method will look like :

   getMissingImg(index){

       return require(this.images[index]);
      }

edited Dec 30, 2018 at 16:24

answered Dec 30, 2018 at 15:20

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Ioan Dimi Over a year ago

Thank you very much for you assistance . In my case i have more than one missing photos that i have to replace it how can i handle this situation? Can i store them in an array instead of localImg:?

Ioan Dimi Over a year ago

I have edit my initial code. I created an array with img url and i try to retrieve it in else statement still with out luck. I can see just the second photo of my list

Ioan Dimi Over a year ago

I cant thank you enough ... What is the require? is that an array?

Boussadjra Brahim Over a year ago

i updated my answer by adding some details and require is a function to load external files like images or js files

Ioan Dimi Over a year ago

Maybe it is annoying for you but could you write me again the syntax about the array using require because you deleted your last comment and i don't have luck with it . images: ["missing_beers-logo/420%20fest.jpg","missing_beers-logo/15th%20aniversarry.png","missing_beers-logo/15th%20aniversarry.png","missing_beers-logo/3%20Weight%20beer%20.png"],

|

Collectives™ on Stack Overflow

Vue.js - change undefined img source that I have created dynamically

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related