[FIXED] How do you set string values from an array in data() as the src path for an img element?

Issue

I am trying to have the <div.box> element that holds the elements appear depending on how many the user asks for using a form. I am using vue3 and using v-for to iterate over the array 'images' that holds strings of urls to images and then set those url values to the src.

But as of now, it's reading that the image in images points to my localhost:3000/image instead of "URLtoImage"

Any suggestions on what I am doing wrong here? Thanks in advance!

My script:

<script>
import ImageService from "../services/ImageService";

export default {
  name: "Image",
  data() {
    return {
      request: "",
      images: [],
      outOfRange: false,
      errorMsg: "",
      isHidden: true
    };
  },
  methods: {
    delay(time) {
      return new Promise(resolve => setTimeout(resolve, time));
    },
    fullDataReset() {
      Object.assign(this.$data, this.$options.data.apply(this));
    },
    getImagesFromCall() {
      if (this.request < 1 || this.request > 5) {
        this.outOfRange = true;
        this.errorMsg = "Please enter a number from (1 - 5)";
        this.delay(2000).then(() => this.reset());
      } else
        ImageService.getImagesFromNasaApodApi(this.request).then(response => {
          this.images = response.data;
        });
    }
  }
};
</script>

My template:

<template>
<div>
  <h1>NASA API PHOTO GENERATOR</h1>
  <div class="container-one">
    <div class="container-item">
      <form class="form" @submit.prevent="getImagesFromCall">
        <input
          type="number"
          min="1"
          max="5"
          class="form-field"
          placeholder="How many photos would you like? (6 max)"
          v-model="request"
        />
        <div id="error-message" v-if="outOfRange === true">{{ errorMsg }}</div>
      </form>
    </div>
  </div>
  <div class="container-two">
    <button
      type="submit"
      id="toggle"
      class="btn btn--primary btn--inside uppercase"
      @:click="isHidden = false; getImagesFromCall()"
    >Confirm</button>
  </div>
    <div id="spacer"></div>
    <div v-show="!isHidden" v-if="request !== ''" class="container-three">
      <div class="box" v-for="image in images" :key="image">
        <div id="image" class="imgBx">
          <img :src="image"/>
        </div>
          <div class="content">
          <div>
            <h2>Image Title</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi accusamus molestias quidem
            iusto.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

And here is what is showing on devtools of what data is retrieved from my external API call:

Solution

I think that the error is in the src attribute:

Try to bind src correctly to {{url}}

<img v-for="url in images" v-bind:key="url" :src="url"/>

Answered By - Ivan Ramirez

Answer Checked By - Katrina (PHPFixing Volunteer)