Leveraging Angular JS capabilities with ng-switch to determine the existence of a file

While iterating through a list, I want to display an image if one exists for each item. If no image is present, default text should be shown instead:

<div ng-repeat="myThing in myThings>
  <div ng-switch on="{{myThing.img}}" >
    <span ng-switch-when="{{myThing.img}}">
      <img src="/img/myThings/{{myThing.id}}" />
    </span>
    <span ng-switch-default>No Image</span>
  </div>
</div>

The default text is successfully displayed, however, the browser attempts to retrieve an image that does not exist, resulting in the following error:

http://localhost:9000/img/myThings/%7B%7BmyThing.id%7D%7D 404 (Not Found)

Is there a way to modify the ng-switch function to prevent this error from occurring?

Answer №1

It's recommended to use ng-src instead of the traditional src attribute for images in Angular applications. Here is an extract from the official documentation:

When using Angular expressions like {{hash}} inside a src attribute, the browser may try to fetch the URL with the literal text {{hash}} before Angular has a chance to replace it with the actual value. The ngSrc directive provides a solution to this issue.

<img ng-src="/img/myItems/{{myItem.id}}" />

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

Ways to incorporate white spaces into text when utilizing the .text() method

Currently, I am utilizing a combination of angularJS and jQuery to work with the tooltip widget and a drop-down menu. Our goal is to extract names from a multi-select field, and when multiple items are chosen from the dropdown menu, we want to display the ...

Organize unstructured JSON data using a specific method

My service returns a JSON with irregular data structure as shown below: dataFromService: [ { event_data: '2021-03-18T15:20:31.314Z', // if !null = page event_category: 'news', event_title_en: 'page title ...

Solving Addition and Subtraction Errors in Javascript/Jquery

Upon running the script below, it aims to calculate the height of the browser, as well as the heights of both the header and footer, subtracting them from the initial browser height: var a = $(window).height(); alert (a); var b = $('#header').cs ...

Can Vue.js be paired with pure Node.js as a backend without relying on Express?

After successfully building a project with both vue js and node js, specifically with express, I'm curious if it's feasible to solely utilize node js without frameworks like express. ...

Guide on Showcasing Countries on a Global Map with Various Colors Using react-svg-map

I'm currently working on a project that involves highlighting specific countries on a world map. The default color for the countries is light blue, but I need to change it to dark blue for the highlighted ones. Although the library I'm using has ...

Is Google Tag Manager causing a delay in the window.load event?

Upon loading my page, an ajax call is triggered. $(window).load(function() { updateDeliverySlots(); }); In addition, the Google Tag Manager javascript code resides at the top of the body section. Although it's recommended to place it in the head, ...

Error in executing Javascript function

Below is a Javascript function I created for expanding and collapsing content: function showAns(inp){ var hide="#hideAns"+inp; var show="#showAns"+inp; var ansdiv ="#ans"+inp; $(hide).click(function(){ $(ansdi ...

Unusual behavior of the `map` function in Firefox's JavaScript

Here's an interesting observation regarding the behavior of the map function in Firefox. In a particular error scenario on a web application, when Firebug pauses at the error, entering the following code into the Firebug console: ["a", "b", "c", "d" ...

Is it possible to include tags in the response using Jquery.form AjaxSubmit?

After using ajaxSubmit on a form, the service sends back a number. Strangely, ajaxSubmit appears to be adding extra tags to the number. form.ajaxSubmit(function(data){ alert(data); }); Upon alerting the data, it displays: "<head></head>< ...

What steps can be taken to resolve the issue of the Cannot POST /index.html error?

Here is an example of a calculator app created using HTML and Javascript. Upon running the program with nodemon and accessing localhost:3000, pressing the submit button triggers an error on Google Chrome. [nodemon] starting `node calculator.js` Server sta ...

Clicking on the following link will initiate the process of submitting a form

I'm encountering an issue with the following code snippet: <a href='javascript:jQuery("#questionnaire").show();'>haha</a> When this code is placed inside a form, it mysteriously causes the form to submit upon clicking the link. ...

Exploring Vue Slots: A guide to parsing and rendering slot components

Currently facing a challenge while developing a web page using Vue, specifically with parsing and rendering the child components inside the <slot>. I need to extract the slot content, convert it into an array of components, and display these compo ...

The functionality of Javascript ceases to operate once I fill out the table

UPDATE: I managed to solve the issue on my own and will mark my answer as accepted in 24 hours according to the system's rules. I've been experimenting with Bootstrap using this repository: https://github.com/BlackrockDigital/startbootstrap-sb-a ...

Issue with Bootstrap affix reset not functioning properly

I've been working on implementing a responsive affix in Bootstrap, and I'm facing some challenges. When the page gets resized, certain elements hide at the top of the page. Due to these width changes, I need to reset the affix and adjust it to th ...

React Redux causing React Router to display empty pages

In my App.js, the following code is present: const Index = asyncRoute(() => import('~/pages/index')) const Register = asyncRoute(() => import('~/pages/register')) const AddDesign = asyncRoute(() => import('~/pages/add-des ...

The Selenium driver's execute_script method yields no result

One of the tasks I have is to determine if a specific element is within view. If it is, I want the script to return True; otherwise, False: driver.execute_script('window.pageYOffset + document.querySelector(arguments[0]).getBoundingClientRect().bottom ...

Placing the video at the center of the background image

                    Can someone assist me with a design issue I'm facing? I have two divs within a section. The left div contains a heading and a button, while the right div contains a video. However, when I try to add a background image to ...

Need to include files within an electron / express application

I'm encountering challenges while setting up an app with: electron express (using mustache templating) firebase My struggle lies in correctly requiring files. The issue seems to stem from the varying "scope" being the electron app or express app, re ...

how to check if a string has white spaces in a react application

If the input string has white space, the alert will indicate unsuccessful. If the input string does not have any white space, the alert will be successful. import React from "react"; export default function DropDown() { let i = document.getEle ...

What is the best way to incorporate React hooks into a for loop?

I am looking to dynamically append a container with a specified number of div elements based on the data in a JSON file. I attempted to include the logic within a for loop, but encountered errors in the process. If you're interested in checking out t ...