Images are not appearing when using ng-repeat

Question

Images are not appearing when using ng-repeat

const createFullName = (first, last) => {
    return `${last}, ${first}`;
};

let partyImage = "";
if(party=="R") {
    partyImage = "<img src='/images/r.png'>";
} else {
    partyImage = "<img src='/images/d.png'>";
}

let chamberImage = "";
if(chamber == "senate") {
    chamberImage = "<img src='/images/s.svg'> Senate";
} else {
    chamberImage = "<img src='/images/h.png'> House";
}

$scope.users.push({
    party_name: partyImage,
    fullname: createFullName(first_name, last_name),
    chamber_name: chamberImage,
    district_name: district,
    state_name: state
});

The HTML part

<tr ng-repeat="user in users">
    <td>{{user.party_name}}</td>
    <td>{{user.fullname}}</td>
    <td>{{user.chamber_name}}</td>
    <td>{{user.district_name}}</td>
    <td>{{user.state_name}}</td>
</tr>

When attempting to display the images, they are shown as tags instead of displaying the actual images. The other variables in the push function are Strings and are displayed correctly. Can someone assist me with this issue?

javascript angularjs

Answer 1

Answer №1

Retrieve only the src from the image and use it as a string

var name = last_name + ',' + first_name;
if(party=="R")
    party="/images/r.png";
else
    party="/images/d.png";

if(chamber == "senate")
    chamber="/images/s.svg";
else
    chamber="/images/h.png";

$scope.users.push({
    party_name:party,
    fullname:name,
    chamber_name:chamber,
    district_name:district,
    state_name:state});

Then in the html incorporate an <img> element with the src attribute tied to binding

<tr ng-repeat="user in users">
    <td> <img src="{{user.party_name}}" /> </td>
    <td>{{user.fullname}}</td>
    <td> <img src="{{user.chamber_name}}" /> </td>
    <td>{{user.district_name}}</td>
    <td>{{user.state_name}}</td>
</tr>

PLUNKER

Answer 2

Retrieve only the src from the image and use it as a string

var name = last_name + ',' + first_name;
if(party=="R")
    party="/images/r.png";
else
    party="/images/d.png";

if(chamber == "senate")
    chamber="/images/s.svg";
else
    chamber="/images/h.png";

$scope.users.push({
    party_name:party,
    fullname:name,
    chamber_name:chamber,
    district_name:district,
    state_name:state});

Then in the html incorporate an <img> element with the src attribute tied to binding

<tr ng-repeat="user in users">
    <td> <img src="{{user.party_name}}" /> </td>
    <td>{{user.fullname}}</td>
    <td> <img src="{{user.chamber_name}}" /> </td>
    <td>{{user.district_name}}</td>
    <td>{{user.state_name}}</td>
</tr>

PLUNKER

Answer 3

Answer №2

Consider implementing the following code snippet.

var name = last_name + ',' + first_name
if(party=="R")
    party='/images/r.png';
else
    party='/images/d.png';

if(chamber == "senate")
    chamber='/images/s.svg';
else
    chamber='/images/h.png';

$scope.users.push({
    party_name:party,
    fullname:name,
    chamber_name:chamber,
    district_name:district,
    state_name:state});
enter code here

Then in your HTML code, add the tag

    <tr ng-repeat="user in users">
        <td>{{user.party_name}}</td>
        <td>{{user.fullname}}</td>
        <td><img src="{{user.chamber_name}}"/> </td>
        <td><img src="{{user.district_name}}"/></td>
        <td>{{user.state_name}}</td>
    </tr>

I hope this solution proves helpful to you.

Answer 4

Consider implementing the following code snippet.

var name = last_name + ',' + first_name
if(party=="R")
    party='/images/r.png';
else
    party='/images/d.png';

if(chamber == "senate")
    chamber='/images/s.svg';
else
    chamber='/images/h.png';

$scope.users.push({
    party_name:party,
    fullname:name,
    chamber_name:chamber,
    district_name:district,
    state_name:state});
enter code here

Then in your HTML code, add the tag

    <tr ng-repeat="user in users">
        <td>{{user.party_name}}</td>
        <td>{{user.fullname}}</td>
        <td><img src="{{user.chamber_name}}"/> </td>
        <td><img src="{{user.district_name}}"/></td>
        <td>{{user.state_name}}</td>
    </tr>

I hope this solution proves helpful to you.

Answer 5

Answer №3

Keep in mind to utilize ng-src for image sources.

<td><img ng-src="{{user.profile_pic}}"/></td>

Angular documentation

Answer 6

Keep in mind to utilize ng-src for image sources.

<td><img ng-src="{{user.profile_pic}}"/></td>

Angular documentation

Images are not appearing when using ng-repeat

Answer №1

PLUNKER

Answer №2

Answer №3

Similar questions

Retrieve information using AJAX via POST method

Incorporating an HTML file into a DIV container while also displaying menu links

What is the process for making an Ajax request in Rails?

Unable to execute a JavaScript function when triggered from an HTML form

Waiting for Angular's For loop to complete

Loop through an array of div IDs and update their CSS styles individually

Guide to importing a JSON file into Vue.js and HTML

A Step-By-Step Guide on Displaying Two Forms with Two Buttons in HTML

Javascript - combining properties using "concatenation"

AngularJS directive for Ionic Leaflet - Utilizing Service to switch tileLayer from side menu

How can I ensure that all row checkboxes are automatically marked as checked upon loading the Material Table in ReactJS?

Challenges with implementing Node Polyfills in webpack configuration file

Switch up the link color when it pops up

Using Alpine JS to rotate through images at regular intervals using the window.setInterval() method

jQuery is great at adding a class, but struggles to remove it

Tips for efficiently loading data into a vuex module only when it is required and addressing issues with async/await functionality

Incorrect measurement of text size

What is the process for combining two services into a single, unified service?

"Customize your text alignment with TinyMCE's align

React Router v6 is throwing an error stating that within the <Routes> component, all children must be either a <Route> or <React.Fragment>