Displaying images dynamically in Angular using ng-repeat with URL strings

I'm working on a project where I need to dynamically call pictures inside an ng-repeat loop. Initially, I tried adding a key/value pair of 'img' to the JSON object I'm fetching and then dropping it inside the URL. However, this approach did not work as expected. Here's an example of what I attempted:

<div ng-repeat="item in marketItemsTest | filter:searchPrivate">
    <img src="assets/images/" + item.name + ".jpg" alt="img01"/>

I'm wondering if I'm not escaping this correctly or if it can't be done this way. Currently, I am only storing the name of the JPG file. Do you think I should store additional information instead?

Thank you for taking the time to read this!

javascriptangularjs

Answer №1

For example:

<img ng-src="assets/images/{{item.name}}.jpg"/>

The documentation for ngSrc explicitly advises against constructing a src string as you have been attempting.

In the original code, the braces {{item.name}} were missing, which is why it was not functioning properly. It should have been:

<img src="assets/images/{{item.name}}.jpg"/>

However, utilizing this approach will prompt the browser to initially attempt to fetch from assets/images/{{item.name}}.jpg

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

Creating a dependent picklist feature using node.js and express

I am currently delving into the world of node.js and express. In my node.js application, I am utilizing express along with express-handlebars as the templating framework. My goal is to incorporate a dependent picklist that dynamically renders based on the ...

javascriptajaxnode.jsexpresshandlebars.js

Creating a single factory that consolidates multiple return statements

Exploring the ins and outs of AngularJS, I find myself eager to learn how to effectively combine two factory modules. Specifically, I am interested in merging the following two: // Factory Module One services.factory('UserService', function ($re ...

javascriptangularjsrest

Executing a POST Request using a Custom Node Module in Express

I'm in the process of developing a web application where the user inputs their username, submits it, and then the application processes the input through a POST request to another server. Based on the response from the external server, the user is red ...

javascriptnode.jsrestpostexpress

It appears that using JQuery's .when and .done functions may result in the code executing before the script has finished loading

Since updating the hard-coded <script> with JQuery promises, I have been encountering these errors frequently: https://i.stack.imgur.com/xkWAk.png The issue seems to be inconsistent in replicating. Sometimes, the error occurs while loading the page ...

javascriptjquerypromise

Can a javascript code for "Infinite Scroll" be created to manage the back button?

Head over to this website: Experiment with the infinite scroll feature. You may notice that when you click a link and then press "back", there are some glitches. Therefore, I am considering developing my own version of an Infinite Scroll functionality. ...

javascriptjqueryhtmlcsstemplates

What is the best way to group data by a specific value within a nested object when using ReactJS material-table?

I have a unique scenario where I possess an array of individuals featuring a nested object known as enterprise. My objective is to effectively group these individuals by the value of company.name within the confines of the Material-Table. const people = [ ...

javascriptreactjsmaterial-uimaterial-table

What is the reason for Bower consistently choosing to download the Angular version 1.5.9-build.5086+sha...?

Struggling to manage my front end dependencies using bower.json. No matter how I specify the version of Angular in bower, a different version is downloaded every time. The issue is that many functionalities in my code rely on previous versions of Angular, ...

javascriptangularjsnpmasp.net-corebower

transferring data between react components

I am currently working on breaking down code into smaller components, starting with the snippet below from Rows.jsx. I am struggling to grasp how props are passed between parent and child components. Despite reading several guides and articles, I remain un ...

javascriptreactjsdynamiccomponentsreact-props

Having trouble getting JavaScript to work when returned via AJAX

After triggering a lightbox by clicking on a business name, I encountered an issue when trying to replicate the same functionality using AJAX. The lightbox fails to show up. Can anyone provide assistance? The following code represents a 3rd party publishe ...

phpjavascriptajax

Is it considered good or bad practice to use plain JavaScript objects in an AngularJS application?

Imagine needing a custom object that doesn't rely on AngularJS (such as a specific collection with unique functionalities). You could create it independently of AngularJS and simply use it in services/controllers. Alternatively, you could design it a ...

javascriptangularjs

How to effectively create factories in AngularJS

I stumbled upon this angularjs styleguide that I want to follow: https://github.com/johnpapa/angular-styleguide#factories Now, I'm trying to write my code in a similar way. Here is my current factory implementation: .factory('Noty',functi ...

javascriptangularjs

Unexpected null value returned upon form submission with Mongoose and ExpressJS

I am encountering an issue with sending data from a basic HTML form to MongoDB using Express. When I try to post it, I am getting null as the result. The Schema I used is: commentname: String. Below is the snippet of the HTML code: <form id="form ...

javascriptnode.jsexpressmongoosemongoose-schema

Updating a dataview inside a Panel in extjs 3.4

I am facing an issue with my extjs Panel component that includes a dataview item. Initially, it works perfectly fine in displaying images from a store. However, upon reloading the imgStore with new image URLs (triggered by a user search for a different cit ...

javascriptjqueryextjsextjs3

Is the Jade template engine becoming obsolete with the use of the AngularJS framework?

As someone just starting out in MEAN stack/web/mobile development, I've noticed that AngularJs is capable of handling all the client-side templating and generating dynamic content. So why do developers still opt to use Jade for server-side templating? ...

angularjsnode.jsexpresspugmean-stack

The JSON output from the gapi (Google Analytics) array in PHP is not displaying any values

I've been utilizing the gapi class within a CodeIgniter website. The implementation I'm using is based on this resource, which returns an array that functions perfectly. To pass this array to my JavaScript, I've been attempting the following ...

phpjavascriptgoogle-analyticsjson

Numerous asynchronous requests

I'm trying to figure out why the application keeps making multiple ajax calls. Check out this directive: gameApp.directive('mapActivity', function() { return { restrict: 'A', link: function(scope, element, att ...

javascriptangularjs

Visualizing network graphs using JavaScript

I am in search of a JavaScript network visualization graph (not a chart) that can handle JSON input effectively. I have tried using the JIT infovis toolkit, RGraph, and space tree to display multiple levels in the graph. However, I have encountered issue ...

javascriptjson

Pause jQuery at the conclusion and head back to the beginning

As a beginner in the world of jQuery, I am eager to create a slider for my website. My goal is to design a slideshow that can loop infinitely with simplicity. Should I manually count the number of <li> elements or images, calculate their width, and ...

javascriptjqueryhtmlcssslideshow

Building an organized framework for a Node project

Two of my applications are utilizing similar API functions, with one developed in Angular and the other in React + Flux. Both applications are required to interact with the same database. While my Angular application is responsible for adding new data to ...

angularjsnode.jsexpressreactjsflux

What could be improved in this AngularJS code snippet?

Currently, I am immersed in an AngularJS book and have extracted the following code snippet directly from its pages: <!DOCTYPE html> <html ng-app='myApp'> <head> <title>Your Shopping Cart</title> </head> & ...

javascriptangularjs