How to properly escape JSON with hyphen or dash in AngularJS ngSrc

Having trouble displaying an image from a json url with dashes. I attempted to use bracket notation but it does not seem to be functioning:

<img ng-src="{{image.['small-size'].url || image.thumb}}">

When using single quotes, my angular view goes blank, and when using double quotes, the image does not display even though it is there.

Answer №1

Get rid of the dot

<img src="{{image['small-size'].url || image.thumb}}">

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

Can integers be used as keys in a JavaScript object's storage?

Currently, I am in the process of creating a JSON index file to serve as a database index for a javascript application that is currently under development. The structure of my index will resemble the following: { "_id": "acomplex_indice ...

The controller does not modify the value stored in the fullName variable

<!DOCTYPE html> <html > <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script> var app= angular.module('myApp',[]); app.controller('myController',function($sco ...

My polling operation is set up with a $timeout function, however, I am unable to successfully refresh the controller once the $timeout function has completed

I am seeking assistance with integrating the factory and controller components below. Specifically, I need guidance on referencing the factory in my controller and ensuring that the controller can access a live count from the API. Currently, I am facing a ...

Can you include conditional logic within a switch statement?

I've been using if, else if, and else statements in my code but recently switched to switch statements which have made things much simpler. Now I'm wondering if it's possible to add multiple conditions inside a switch statement, similar to i ...

Prevent unnecessary re-renders of components by optimizing state changes with hooks

In my Layout component, there is a Table component with an Entry component for each row. Each row can be selected, and when a row is selected, it is added to the state so that all selected entries can be sent to a REST service later using a button. The i ...

What is the process for programmatically importing a module into the local scope in Node.js?

The coding environment is using a browser and the bundle tool being used is webpack. In my router.js file, I have the following code: import foo from './views/foo.vue' import bar from './views/bar.vue' import zoo from './views/zoo. ...

The functionality of Angular binding appears to be experiencing issues when used in conjunction with ngIn

On my timeline, I have posts displayed using a $firebaseArray that updates properly when there are changes. However, I noticed that when I try to bind other data, it only works when ngInfiniteScroll is fetching more data from Firebase, triggered by scrolli ...

What are the methods for adjusting the height of one div in relation to another div?

How can I make the height of the first div equal to the dynamic height of the second div, when the second div contains a lot of dynamic data with an unpredictable height? <div style="width: 100%;"> <div class=& ...

Mastering the Art of Modifying HTML with Node.js

Is it possible to manipulate HTML using Node.js? 1. First, I need to retrieve data from a database. 2. Then, I need to modify or add HTML code within Node. In essence, the goal is to fetch data and integrate it into an HTML file. The JavaScript snippet ...

Attempting to serialize a form using Ajax and jQuery

I am facing an issue with submitting user input from a modal using jQuery and AJAX. The problem is that the AJAX call is not capturing the user input. Even though the AJAX call is successful, when I check on the server side, the user input appears to be bl ...

node-gallery reports: "No albums were discovered"

I am exploring the use of node-gallery in my Node js/Express/Jade project. After following the guidelines provided at https://github.com/cianclarke/node-gallery, I encountered an issue when attempting to access the page localhost:3000/gallery: {"message" ...

The Loopback Node is throwing an error: 'enum' module not found

I've been searching extensively for a solution, but so far have not been successful. I've already tried the following: 1. npm cache clean --force 2. npm install I've also attempted: 1. Manually removing cache files from C:\U ...

Whenever I attempt to start my ReactJS project using the command line with `npm run it`, I keep encountering an error

Encountered an issue with the webpack-dev-server script while working on my project. Ensure that your node.js and npm versions are up to date. If they are, the problem might lie within the reactjs package rather than npm itself. Kindly inform the author ab ...

Enhance and soften images using CSS with smooth responsiveness across all web browsers

When an image is clicked, it should zoom in and become the background of the page with a blurred effect. I attempted to achieve this using the following code... <style type="text/css"> body{ position: absolute; margin-left: 100px; right: 0; z-inde ...

Names picked at random and presented in the innerHTML

I am currently working on a project that involves displaying random names from an array in a text area named "textbox". Currently, I am using math.random() to pick a name randomly, but it only generates a new random name when the page is reloaded. How ca ...

nap within a for loop and executed in a finally block

I am currently facing a challenge with the following loop: for (const pk of likerpk) { await likeMediaId(ig, pk.trim()); } The problem is that I want to call likeMediaId every X seconds and then, after likeMediaId is done for all items, I want to c ...

Triggering OnClick() more than once may result in the function failing to execute as intended

My dilemma involves a table of cells where clicking a cell triggers an event. I need to dynamically add cells, so I plan to call OnClick again on all rows. But when I do so for the second time, cells that have already had OnClick called twice stop firing a ...

How to Use JQuery to Retrieve the Nearest TD Element's Text Content

Hey there, here is some HTML code that I need help with: <tbody> <tr> <td class="text-center"><input type="text" class="form-control cardSerialNumber"></td> <td class="text-center"><button type="button" onc ...

Troubleshooting issues with the controller functionality in AngularJS

The following code is not producing the expected output of 'Hello, World' output: {{ greetings.text }}, world Could someone please assist me in determining why it is not displaying 'hello, world' as intended <!doctype html> ...

Switching from the .html extension to the absence of .html in Angular

I currently have this htaccess file set up: <IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{REQUEST_FILENAME} -s [OR] RewriteCond %{REQUEST_FILENAME} -l [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^.*$ - [NC,L] #R ...