Unable to fetch data using the Flickr API

95 Views Asked by At

I'm trying to build a simple photo gallery web application using Vue JS as a way to learn Vue JS. I am attempting to use the Flickr API (https://api.flickr.com/services/feeds/photos_public.gne?format=json) in my web app and I'm trying to fetch data from the above URL but unable to. The following is my code. It's still work in progress hence why its missing a lot things and I just want to see the response in the console.

<template>
  <div class="container">
    <div>
      <h1>TEST</h1>
      <tbody>
        <td v-for="(image, index) in images" :key="index">
          {{ image }}
        </td>
      </tbody>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "ImageFeed",
  data() {
    return {
      images: [],
    };
  },
  methods: {},
  computed: {},
  mounted() {
    axios
      .get(
        "https://api.flickr.com/services/feeds/photos_public.gne?format=json"
      )
      .then((response) => {
        console.log(response);
      });
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

I get the following console error: axios err

however when I test in Postman, I get the following response, which is the end goal: postman

I would appreciate any help!

0

There are 0 best solutions below