AngularJS Get request unable to fetch image URL due to receiving a "302 found" error

Trying to enhance my AngularJS app by incorporating an image from a random cat image site, using the URL received. Below is the snippet from my controller.js:

'use strict';

 /* Controllers */
 var catPath = "http://thecatapi.com/api/images/get?format=src&results_per_page=1";
 var Controllers = angular.module('museum1.controllers', []);
 Controllers.controller('oneCatController', ['$scope', '$http',
 function($scope, $http) {
    $http.get(catPath).success(function(data) {
        $scope.imgurl = data;
        console.log($scope.imgurl);
    });
 }]);

Here's the partial that should display the cat image fetched:

<div>

    <img ng-src="{{imgurl}}">
</div>

The controller is called from app.js, not shown here.

While inspecting with fireBug, I noticed a message indicating the path requested and "302 Found 770ms". Interestingly, the same path works when accessed directly from the browser address bar. The Angular code was successful for me using this example.

Answer №1

Here are a few things to consider:

  1. Avoid using double curly brackets for ng properties as it may not be necessary.
  2. Make sure the case sensitivity of your variable names matches in both the controller and HTML to avoid issues with displaying values.

Update your code in the controller:

$scope.imgurl = data;

And in the HTML:

<img ng-src="{{imageurl}}">

Ensure that the 'U' in 'imageurl' is lowercase.

If ng-src uses JavaScript to load the image, you may encounter cross domain security issues if the image is hosted on a different domain. Make sure to check this to prevent any potential problems.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Function(JS) is specifically designed to only function within the topmost div or quote

Currently, I am facing an issue with a function I have implemented. This function adds a blur effect to words in a Blockquote when the page is loaded. However, I need this function to work for all Blockquotes and different divs on the page, not just the to ...

Having trouble importing my function component into a router in reactjs. Need some guidance on how to properly set it up

I am working on a Slider component function called export default Slider. In my App.js file, I have the following code: function App() { return ( <Router> <Routes> <Route exact path='/' element={<Home />} /> ...

Is the absolute positioned element on the left or right based on its current location?

Is there a way to assign absolute positioning with left at 0px or right at 0px depending on whether the positioned div will go outside of its container? For example, when you right click in a browser and see the menu appear to the right of where you click ...

Enhancing game menus for various mobile screen sizes

I've noticed a consistent pattern in the games I download from the Google Play Store - they all have a background image at the menu with clickable buttons. When testing these games on different devices, I found that the backgrounds didn't stretch ...

Getting the x-axis points on Google charts to start at the far left point

I have integrated the Google API for charts into my application and am using multiple charts on the same page. However, I am facing an issue with setting padding for the charts. When I include more data points, the chart area occupies more space in the div ...

404 error occurs when routing in Express.js is unable to find the

Seeking Assistance I am encountering an issue with my express.post() routing as it returns a 404 state. Current Implementation The code in my server.js file seems fine, but I am facing this routing problem. // Required modules and database connection v ...

How can I dynamically set the width of a span element in HTML?

Hello there! As a beginner in html and angularjs, I'm experimenting with dynamically assigning span width based on an angular js response. <div class="statarea" ng-repeat="x in names"> <div class="ratingarea"> <div class=" ...

Having difficulty generating the HTML list of maps using the code provided in AngularJS

Could someone assist me in displaying the value in HTML for the following code written in angular js? Here is the angularjs controller code : $scope.arr=[new Map().set("MYKEY","MYVALUE")]; And here is the corresponding html code : {{arr}} Any tips on ...

Uh oh! An error occurred when trying to submit the form, indicating that "quotesCollection is not defined" in Mongodb Atlas

Displayed below is my server.js file code, along with the error message displayed in the browser post clicking the Submit button. const express = require('express'); const bodyParser = require('body-parser'); const MongoClient = require ...

The issue of controller inheritance not functioning properly when using the controller as syntax has

Here is the basic structure of the HTML: <data> <definition-data></definition-data> </data> In my data template file, I have the following code that works as expected: <div ng-controller="dataCtrl as dataitems" ng-cloak> ...

Efficiently processing multiple Ajax requests with a single callback function

I am currently facing a situation where I need to make multiple AJAX requests and only proceed if all of them are successful. The typical usage of $.when($.ajax(), [...]).then(function(results){},[...]); doesn't quite fit my needs because the number o ...

From jQuery to HTML to PHP, then back to HTML from PHP through jQuery

Hey, I have a code snippet that I'm working on: <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/javascript"> function get() { $.post(' ...

Display endless data within a set window size

I am looking to create a fixed-size window for displaying text from the component <Message/>. If the text is longer, I want it to be scrollable within the fixed window size. See screenshot below: Screenshot export default function AllMessages(){ ...

Revitalize website when submitting in React.js

I need assistance with reloading my React.js page after clicking the submit button. The purpose of this is to update the displayed data by fetching new entries from the database. import React, {useEffect, useState} from 'react'; import axios from ...

Enhance the function for handling AJAX responses

Utilizing this code allows for the handling of responses from an RSS feed. The code efficiently organizes and appends content, separating any embedded videos. While seeking feedback primarily on performance/efficiency, I am also open to other suggestions. ...

Any suggestions on how to incorporate the variable into the inline JavaScript [[]] API path?

I have a query regarding creating a URL in JavaScript, but I'm unsure how to include variables within th:inline="javascript". Below is my code snippet: <script th:inline="javascript"> $(function() { $('#querySubmit').click(queryS ...

What is the method to modify an action in an Ajax function?

I am trying to modify the action in the AjaxUpload function. The issue is that the value of setnamefile in the action does not change because the page does not reload. My idea was to change the action on submit, but I have not been able to do so successfu ...

When zooming out, Leaflet displays both tile layers

I'm currently working on integrating two tile layers along with a control for toggling between them. Below is the code snippet I am using: const layer1: L.TileLayer = L.tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', { ...

Creating fresh texts by pairing the values in constants with variables

Make sure to carefully read the question before proceeding. I have attempted multiple commands in order to retrieve a single variable from the server [TSE](https://old.tsetmc.com/Loader.aspx?ParTree=15131F) which serves Stock Exchange information. The pag ...

The function `createUser` is currently not functioning properly on Firebase/Auth with Next.js

I am currently working on implementing email and password authentication using Firebase Auth with Next.js. This time, I want to utilize a dedicated UID for authentication purposes. In order to achieve this, I believe it would be better to use the createU ...