Images within <md-card>s that are generated by ng-repeat are not being displayed

Encountering a strange dilemma with <img>s within Angular Material's <md-card>:

  • Multiple md-cards are being generated using ng-repeat
  • Data is sourced from Google Firebase: Link
  • Only the second card displays the image: Link
  • View it live here: dev.oster-holzhaus.de/#/holzbau (Unable to add more than two links currently)

Snippet of my code:

<md-content class='md-padding' layout="row" layout-wrap layout-align="center">
<md-card style="width: 400px;" ng-repeat="service in services">
    <img ng-src={{service.imagepath}} class="md-card-image">
    <md-card-title>
        <md-card-title-text>
            <span class="md-headline">{{service.title}}</span>
            <span class="md-subhead">{{service.subhead}}.</span>
        </md-card-title-text>
    </md-card-title>
    <md-card-content>
        <p>{{service.text}}</p>
    </md-card-content>
    <md-card-actions layout="row" layout-align="end center">
        <md-button>Test</md-button>
    </md-card-actions>
</md-card>
</md-content>
  • The issue lies in line 3.
  • Data retrieval is accurate, only problem is image displaying on just one card.
  • Switched to a local imagePath, same anomaly persists

Seeking advice or solutions from those facing similar difficulties. Thank you!

Best regards, Enzo

javascriptangularjsfirebaseangular-material

Answer №1

Ensure to verify if the image url fetched from service.imagepath is correctly displayed on the DOM.

You can do this by adding {{service.imagepath}} within the ng-repeat loop.

Answer №2

If you prefer using cards with images, it is recommended to utilize md-card-title-media or embed the image within md-card-content. You can find an example on CodePen

HTML Markup

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
  <md-content class='md-padding' layout="row" layout-wrap layout-align="center">
    <md-card style="width: 400px;" ng-repeat="service in services">      
        <md-card-title>
            <md-card-title-text>
                <span class="md-headline">{{service.title}}</span>
                <span class="md-subhead">{{service.subhead}}.</span>
            </md-card-title-text>
          <md-card-title-media>
            <img ng-src={{service.imagepath}} class="md-card-image" style="width:150px;">
          </md-card-title-media>
        </md-card-title>
        <md-card-content>
            <img ng-src={{service.imagepath}} class="md-card-image" style="width:150px;">
            <p>{{service.text}}</p>
        </md-card-content>
        <md-card-actions layout="row" layout-align="end center">
            <md-button>Test</md-button>
        </md-card-actions>
    </md-card>
  </md-content>
</div>

Javascript

angular.module('MyApp',['ngMaterial', 'ngMessages'])

.controller('AppCtrl', function($scope) {
  $scope.services = [
    {title: "Cow", subhead: "Animal", imagepath: "https://upload.wikimedia.org/wikipedia/commons/0/0c/Cow_female_black_white.jpg"},
    {title: "Car", subhead: "Transport", imagepath: "http://i2.cdscdn.com/pdt2/2/6/2/1/700x700/nit0641243370262/rw/voiture-electrique-pour-enfant-2-x-30w-rouge.jpg"},
    {title: "House", subhead: "Building", imagepath: "http://www.smallworks.ca/wp-content/uploads/exterior11.jpg"}
  ];
});

Answer №3

I finally solved the issue. Although my markup was correct, I realized there was a typo in "imagePath"/"imagepath", and in the code it was also {{service.imagepath}} (with a lowercase p). As a result, only the second service with "imagepath" was loading properly.

Appreciate all the help, team!

Best regards, Enzo

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

What is the best way to iterate through this JSON data and add it to a div in an HTML document?

Here is the structure of my JSON: { "content": [ { "title": "'I need some rest'", "description": "Descript One", "link": "http://www.google.com/?id=90#hhjjhjC-RSS", "guid": "http://www.google ...

javascriptjqueryajaxjsonjsonp

Enhancing User Interface with AngularJS and NodeJS: Dynamically updating and animating the

I am currently coding in angularjs/nodejs To pull data from my database, I have utilized the powerful $http service. And for displaying this data on the view, I have incorporated the ngRepeat directive. However, I am facing a challenge. Whenever I add ...

angularjsnode.jsmongodb

Issue with React redirect not functioning post transition

A component I created includes a redirection route that triggers after an animation finishes. Here is the code for reference: Menus.jsx class Menus extends Component{ constructor (props) { super(props); this.state = { select: 'esp ...

javascriptreactjs

Creating a Selectable Child Form in ReactJS that Sends Data to Parent Form

Sorry for the lack of details, I'm struggling to explain this situation clearly. I'm currently learning ReactJS and JS. In a project I am working on, I have the following requirements: There is a form where users can input text and numbers. The ...

javascriptreactjsmaterial-ui

The Mongoose connection pool has been shut down

I am currently working on a web application that retrieves data from a Mongo database. I have set up 2 cron jobs using Heroku scheduler to run daily and perform tasks on a remote database. The issue arises when these jobs need to conclude and close the con ...

javascriptnode.jsmongodbexpress

Understanding the rotation direction or handedness in three.js

It has come to my attention that when I perform rotation around the Z axis on my model, as shown below: model.rotateZ(rotatedAngle * Math.PI / 180); The rotation appears to be in a counter-clockwise direction around the axis. Can this observation be co ...

javascriptthree.jsrotation

What is the solution for changing image sources dynamically in React-Native?

How can I access image sources from a JSON file without encountering a module error when using JSON objects as the source? JSON FILE: { "Image": {"source": "./SourceFolder/ImageFile.png"} } JS FILE const data = require('./jason.json'); ...

javascriptjsonreact-native

The Access-Control-Allow-Origin header seems to be ineffective while implementing an axios post request in a React application

While attempting to send an object to the API, I encountered the following issue: Access to XMLHttpRequest at 'https://ciboservis.herokuapp.com/api/v1/filial/adm' from origin 'http://localhost:3001' has been blocked by CORS policy: Resp ...

javascriptreactjspostaxioscors

Tips for verifying the rendered view post data retrieval from an API in Vue JS

Having trouble retrieving data from the API using Vue JS and printing the page? After fetching the data, some elements may not render completely when trying to print, resulting in blank data being displayed. While using a setTimeout function may work for s ...

javascriptvue.jsprintingreactive-programming

Incorporate a delay when using jQuery's mouseenter function

I'm trying to implement a tooltip that appears 5 seconds after the mouse enters. Here's the code I've been working with: $('thead').mouseenter( function() { var tooltip = $('<div id="tooltip" class="tooltip-container ...

javascriptjquerytooltipdelay

How to maintain the previous position of Rzslider in Angular Js after selecting the date?

I am currently utilizing RZslider for date and time picking, but I am encountering repeated issues. As a newcomer to Rzlider and angularJs, I am struggling with some aspects. The slider is set to display the current time plus 4 hours and minus 4 hours. For ...

javascriptjqueryangularjsdate

Capturing user input with Angular Material forms in HTML

In the process of working on a project in Angular, I am utilizing the Angular Material component library. As part of this project, I am creating a form with multiple fields. Everything is functioning properly, however, the layout appears slightly off: ht ...

htmlangulartypescriptangular-material

Having trouble resolving the BooksAPI in my code, can anyone help?

I've been trying to troubleshoot this problem, but I can't seem to find a solution. I'm working on a web application for book reading that allows users to organize books they have read, want to read, and are currently reading. On the search ...

javascriptjsonreactjs

Displaying a row number column in slickgrid: tips and tricks

Utilizing an ajax call, I am showcasing data in a slickgrid that resembles the following: india 564 usa 45454 japan 5454 The dataset I am retrieving does not include a column labeled 'Number' with row number values. How can I add a 'Numb ...

javascriptc#jqueryasp.net-mvc-4slickgrid

Run a function once the AJAX request is finished within an object declaration

I'm facing an issue while attempting to populate a dynamic modal with data. The modal should only appear once the data has been successfully added. I tried utilizing $.when(Ss.pieceInfo(piece)).then(Ss.showInfo());, but it appears that both functions ...

javascriptjqueryajax

How can I create an input field that comes with a preset value but can be updated by the user with a different name?

I am in need of a solution that will enable a user to update text on a webpage dynamically. I have been unable to find any information on how to achieve this. Is there anyone aware of a method to implement this feature? Perhaps a library or utilizing Vue ...

javascripthtmlcssvue.js

Elevate sublevel vue component

I am facing an issue with a nested and reused vue component. I am attempting to use v-show to display a part of the component (icons) when its outer parent is hovered. In order to achieve this, I am passing the parent and child index as props. However, I ...

javascriptvue.js

Do I need to recompile anything after making changes to a node module in my vue.js project in order for the modifications to take effect? The updates are not appearing as expected

Currently tackling a Vue.js project and came across an issue with the Bootstrap-vue module that I would like to remove. After locating the section in the module responsible for this behavior, I commented it out. But strangely, the changes are not showing ...

javascriptvue.jsnpm

When using WYSIWYG editors, be on the lookout for empty paragraphs and incorrect code in CSS, JavaScript, and

I am currently in the process of redesigning a website for a client. The site is already built using Joomla 1.7, but I am facing an issue with the articles section that was created by the client using a WYSIWYG editor. The problem lies in the messy code st ...

javascripthtmlcssjoomlawysiwyg

Creating dynamic animations in React/Redux that respond to user actions

As I near the completion of my first React+Redux application, I am eager to incorporate animations throughout the different sections of the project. However, I have found that the existing solutions do not quite meet my expectations. The ReactCSSTransition ...

javascriptreactjsanimationredux