Passing image URLs through StateParams in Angular JS with Ui router

I seem to have encountered a small issue with my HomePage. I am using an NG-repeat with images in posts, but when I try to click on a post, I receive the following error:

TypeError: Cannot read property 'facebook' of undefined
    at new <anonymous> (app.js:234)
    at invoke (ionic.bundle.js:12877)
    at Object.instantiate (ionic.bundle.js:12885)
    at ionic.bundle.js:17154
    at IonicModule.controller.self.appendViewElement (ionic.bundle.js:48176)
    at Object.IonicModule.factory.ionicViewSwitcher.create.switcher.render (ionic.bundle.js:46392)
    at Object.IonicModule.factory.ionicViewSwitcher.create.switcher.init (ionic.bundle.js:46312)
    at IonicModule.controller.self.render (ionic.bundle.js:48050)
    at IonicModule.controller.self.register (ionic.bundle.js:48008)
    at updateView (ionic.bundle.js:53315)

Also,

GET http://127.0.0.1:8103/%7B%7BauthData.facebook.cachedUserProfile.picture.data.url%7D%7D 404 (Not Found)

This is the HTML code:

<div ng-repeat="(id,post) in posts">

    <div class="card" ui-sref="tabpost({ postname: post.nameid, postdescription: post.descriptionid, postdate: post.startdateid, posthour: post.starthourid, postprice: post.priceid, postnbguest: post.nbguestid, postpicture: post.pictureid })">
        <div class="item item-divider" ng-class="{{post.starthourid | setImageClass}}">
        <h2 class="text stable"> {{ post.nameid }} </h2>
        <h3 class="text stable" id="header-date">
        <i class="icon ion-clock"></i> Le {{ post.startdateid | date : "d MMM" }} à {{ post.starthourid | date : "HH:mm" }}</p>
      </div>
      <div class="row">
      <div class="col">
        <h3><i class="icon ion-ios-location"></i> À 500m</h3></div>
      <div class="col"><h3><i class="icon ion-ios-people">
        </i> 2/{{ post.nbguestid }} </h3></div>
      </div>
      <button class="button button-stable" id="positive-btn-price" disabled>{{ post.priceid }}€</button>
      <img class="imgProfilPostPositive" src="{{ post.userid.facebook.cachedUserProfile.picture.data.url }}">
      <div class="item item-divider" id="footerPostNotepositive"><p> <i class="fa fa-star"></i> Popular </p> </div>
        </div>
      </div>

</div></div>

App JS code:

  .state('tabpost', {
  url: '/tabpost/:postname/:postdescription/:postdate/:posthour/:postprice/:postnbguest/:postpicture',
  templateUrl: 'templates/tab-post.html',
  controller: 'PostCtrl',
  })

Controller JS code:

        $scope.nameid = $stateParams.postname;
        $scope.descriptionid = $stateParams.postdescription;
        $scope.startdateid = $stateParams.postdate;
        $scope.starthourid = $stateParams.posthour;
        $scope.priceid = $stateParams.postprice;
        $scope.nbguestid = $stateParams.postnbguest;
        $scope.userid.facebook.cachedUserProfile.picture.data.url = $stateParams.postpicture;

Would appreciate any help or insights on how to pass the picture to my Post page properly. Thank you for your time.

Answer №1

When using Angular markup like {{hash}} in a src attribute, it may not function as expected. The browser might try to fetch from the URL with the literal text {{hash}} until Angular steps in to replace it. To avoid this issue, the ngSrc directive can be used.

An incorrect example:

<img src="http://www.gravatar.com/avatar/{{hash}}" alt="Description"/>

The recommended way to write it is:

<img ng-src="http://www.gravatar.com/avatar/{{hash}}" alt="Description" />

For more information, visit: https://docs.angularjs.org/api/ng/directive/ngSrc

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

Animating fjdxsu using Threejs formula

Can you provide me with the exact formula that should be used in the animate function? ...

Using AngularJS filter to refine results based on specific values within JSON data

I am looking to implement a custom free text filter with just one input field in a table. The standard filter currently applies to all values, but I specifically need it to focus on col1 and col2 from this JSON array: myJsonArray = [{col1: "xxx", col2: "y ...

Retrieving a component's property within its event handler in React

In the React component, there is a need to create multiple instances with different key values passed as arguments to the onClick event handler. However, the issue arises when using a variable such as 'value' in a for loop, as it ends up taking t ...

Extracting information from a JSON data within an API

How can I retrieve data with a name tag from JSON data using Ajax? The function showCard is not functioning properly when I try to grab data with a name tag. My goal is to display the name of the API data when an img element with the class found is clicked ...

Retrieving data from a file results in receiving blank strings

Struggling to access the data within a directory of files, I've encountered an issue where the data doesn't seem to be read correctly or at all. Even though there is content when opening the files individually, when attempting to examine their co ...

Combining HTML, CSS, JAVASCRIPT, and PHP for a seamless web development experience

As a beginner in web development, I have some knowledge of javascript, html, css and am currently delving into php. However, I am struggling to find comprehensive resources that show how to integrate all these languages together. I would greatly appreciat ...

Separate text by the number of letters in each word while ensuring that words are not split in half

I have created a function that splits a given article by a specified letter count, but it also separates words at the end of lines. I want to add a hyphen at the end of those lines if a word is incomplete. let textContent = `Lorem Ipsum is simply dummy tex ...

Issue encountered while attempting to adjust a date (the modification was incorrect)

I am currently working on developing a calendar feature using Angular. Part of this project involves implementing drag and drop functionality to allow users to move appointments from one day to another. However, I have encountered a strange issue. When at ...

Trouble encountered when trying to use an anchor link with the .slideUp jQuery function

Would you be able to assist me with understanding why my anchor links are not functioning correctly? I have 3 anchor links, for example: Google (not working) Yahoo (not working) Facebook (working) Any insights on why Google and Yahoo are not working? &l ...

Updating state atoms in Recoil.js externally from components: A comprehensive guide for React users

Being new to Recoil.js, I have set up an atom and selector for the signed-in user in my app: const signedInUserAtom = atom<SignedInUser | null>({ key: 'signedInUserAtom', default: null }) export const signedInUserSelector = selecto ...

Securing pages in Laravel and Vue JS: Restricting access to unauthorized users

I have some concerns about my project as it relies on local storage. What if someone figures out how to manipulate it and change roles and permissions set for the logged-in user? For example, if someone changed ['accounting'] to ['accounting ...

Displaying outcomes in dialog box when button is pressed

I am working on a website where I want to enhance the user experience by displaying output in a dialogue box upon click. The current setup involves the user selecting a vendor and time duration, with the results appearing below the Submit button. However, ...

Streamline user access with automatic JWT authentication in Vue application

When it comes to authorizing actions and accessing protected resources from my backend, I rely on jwt tokens for security. Here is an overview of the technologies used in both the frontend and backend: Frontend: Vue, Vue Router, VueX, Vuetify Backend: Ex ...

Toggle the submit button using jQuery based on the comparison of the jml_automatic field with the id_km field

I recently learned jQuery last month, and now I am working on a form using jQuery to allow users to input gas requests. However, the script is not working to compare the values from #jml_km with #id_km, and the submit button is still not disabled when the ...

Should each HTTP request in a Node web app open a separate MongoDB connection?

I've integrated MongoDB into my Express.js Node web app. Here's what I have so far: // in app.js var mongodb = require('mongodb'); var mongourl = /* ... */; // These are just examples: app.get('/write', function (req, res) ...

Animating slides with CSS Keyframes and React, incorporating toggle slide fade out and slide fade (back) in

I am seeking a solution for toggling a box (div) with slide-out animation and then sliding back in animation (in reverse) upon button press. My requirement is to have no animations during the initial page render. While I can successfully slide the box to ...

Creating a foolproof image polling platform: A step-by-step guide

I'm in the process of creating a webpage on my site that allows users to view a collection of images. The goal is for each registered user to choose one picture as their favorite, increasing that picture's score by one. The image with the highest ...

Error TS2451 in GatsbyJS: "react_1" block-scoped variable cannot be redeclared

Trying to implement typescript with custom routes in gatsbyjs: require("source-map-support").install(); require("ts-node").register(); exports.createPages = require("./src/createPages"); tsconfig.json { "include": ["./src/**/*"], "compilerOptions": ...

Converting objects into JSON format

I'm trying to transform an object that looks like this: { user[id]: 1, user[name]: 'Lorem', money: '15.00' } Into the following structure: { user: { id: 1, name: 'Lorem', }, money: ...

Creating a self-updating dynamic component: A step-by-step guide

Currently, I am working on a component that receives another component via props to render. However, this component has the ability to update and change itself. The issue arises when the first time it is changed, the component functions correctly but crash ...