PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Monday, October 17, 2022

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

 October 17, 2022     html, javascript, vue.js     No comments   

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:

enter image description here


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)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing