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

Issues with Submitting Form using Jquery, PHP, and Mysql

As a beginner, I find this task quite stressful. I want to create a simple chat system where users can send messages to the database without refreshing the page. Why isn't this code working (I've used similar code successfully before)..? <scr ...

javascriptphpjquerymysql

Utilizing a Single Variable Across Multiple Middlewares in nodeJS

I encountered an issue where I am attempting to utilize one variable across two middlewares, but it displays an error stating that the variable is not defined. Here is an example of my situation: //1st middleware app.use((req, res, next) =>{ cont ...

javascriptnode.jsexpressnodesmiddleware

Customize your Angular UI Bootstrap Datepicker with unique buttons - here's how!

Currently, I have a datepicker with clear and close buttons. I tried using the append function to add more buttons to this datepicker, but it didn't work because the content is not loaded until we click the icon since it's a popup datepicker. Is ...

javascriptangularjsdatepicker

Looking to display the "loading....." message on a PHP page?

I am working on a PHP webpage where I need to implement the following features: 1. Upon clicking "Say Thanks", it should change to "Done!". 2. Simultaneously, I would like to trigger an action in the indexController. 3. While this action is happening, I wa ...

phpjavascriptajaxzend-frameworkaccordion

What is the function of this.handleClick that is positioned on the LEFT side of the = operator?

I'm struggling to understand the usage of this in an ES6 constructor. Initially, I grasped the following concepts (see example below): - We utilize this.height = height; to introduce a new instance variable. - Adding a new instance method with cl ...

javascriptreactjsecmascript-6ecmascript-5es6-class

Displaying entries of input data

I have an application that includes a modal window with filters, but I am looking to add another type of filter. However, I am struggling with implementing it in React and would appreciate any help with the code or recommended links. Essentially, I want t ...

javascriptreactjsfilter

How to populate an ExtJS 3.4 combobox with local JSON data in a few simple steps

I am utilizing ExtJS 3.4 and in need of populating a combobox with specific data obtained from a previous XMLHttpRequest, stored in a variable as follows: my_variable = "[{"cod_domini":"1","nom_domini":"Sant Esteve de Palautordera"},{"cod_domini":"2","no ...

javascriptjsonextjsextjs3

A guide to accessing array elements (JSON) in Angular

Having a variable named $scope.informationData, the data appears like this when outputted by console.log: {"completed":100,"pending":50,"defects":20,"overdue":10} However, when trying to display just the "overdue" value in my HTML using the following cod ...

arraysjsonangularjs

Troubleshooting problem with transmitting data using the b4j jQuery WebSocket library

I'm seeking guidance on the process of sending data through a custom library that connects to a Java server operating as a WebSocket server. The code I'm using for successful connection is: <script src="https://ajax.googleapis.com/ajax/libs/ ...

javascriptjquerywebsocketb4j

Development of Chrome Extensions, JavaScript dilemma

Hey there, I'm new to JavaScript and I've been diving into the world of creating Chrome extensions. I'm trying to set up a content script and browser action, but I'm struggling to get it up and running. I know I'm probably making a ...

javascriptgoogle-chrome

collaborative data interchange in angularjs controllers

When it comes to managing shared state between controllers, I often struggle to find the best approach among the many options recommended on forums like Stack Overflow. To help clarify my thoughts, I've created a simple diagram outlining my basic idea ...

angularjs

Why am I encountering a type error in NodeJS when utilizing the ping module?

I'm currently working on creating a simple app for pinging an IP address. The HTML form I've created has one input field for the IP address, which is then sent to NodeJS for processing. I am utilizing the ping module to retrieve the results. Ever ...

javascriptnode.jsexpressnpmping

Strategies for extracting data from multiple Textareas in React

I am facing an issue with a form that contains multiple textarea elements (specifically 3). The problem is that when I type in one textarea, the content is automatically filled and updated in the other textareas as well. This behavior is not desired. I h ...

javascriptreactjsforms

Can a standalone Angular plugin be developed for seamless integration within different Angular websites?

My affinity for Angular runs deep. That being said, I have a desire to develop an Angular plugin that can be seamlessly integrated into websites using various frameworks. Whether it's Angular or something different, my goal is compatibility across th ...

angularjsnpmwebpackangular-directive

Changing the index of an item in an array in React based on order number

Hey there, I'm a new Reactjs developer with a question. It might be simple, but I'm looking to learn the best practice or optimal way to change the index of a selected item in an array based on user input. Essentially, the user will provide a num ...

javascriptreactjs

Troubleshooting: Issue with Firebase callable function execution

In my index.js file, I have the following code snippet: const firebase = require("firebase"); const functions = require('firebase-functions'); // Firebase Setup const admin = require('firebase-admin'); const serviceAccount = require(&a ...

javascriptnode.jsfirebasegoogle-cloud-functions

Steps for adding hover color to a div with linear gradient border

My current challenge involves adding a hover color to a specific div, but I'm facing obstacles due to the gradient background that was implemented to achieve border-radius functionality. This task is being carried out within a React Component using c ...

javascripthtmlcssreactjs

Issues with data within a Vue.js pagination component for Bootstrap tables

Currently, my table is failing to display the data retrieved from a rest api (itunes), and it also lacks pagination support. When checking the console, I'm encountering the following error: <table result="[object Object],[object Object],[object Ob ...

javascripthtmlcssvuejs2bootstrap-vue

Utilize Vue.js 3 and InertiaJs to Retrieve Session Information in Laravel 9

I am currently working on my initial Laravel project, incorporating Vuejs for the frontend. One of the key features of my application is allowing a Super admin to log in as a User (impersonate). By clicking on the Impersonate Button, the word impersonate g ...

javascriptlaravelvue.jsinertiajs

The issue of the Ajax beforeSend function not triggering at times, causing a delay in displaying the bootstrap progress

I'm experiencing issues with my Bootstrap tabs and the progress bar not consistently showing up. I have 3 tabs, each displaying query results in a table. Whenever the search button is clicked or a tab is changed, an ajax call triggers a function with ...

javascriptjqueryajaxtwitter-bootstrap