The onError event is not functioning as anticipated

I am facing a perplexing issue that I just can't seem to resolve.

const handleImageError = e => {
    e.target.onerror = null;
    e.target.src = 'factory2.svg';
    e.target.width = 45;
    e.target.height = 41;
};

items.map(item => {
   if(item.data) {
       <img src={`${item.data}?size=20`} onError={handleImageError} />
   } else {
       <Logo styleName="defaultIconLogo" width={25} height={20} />
   }

})

In dealing with image errors, the function above switches an image to another source ('factory.svg') and adjusts its dimensions in case of an error. The problem arises when an image successfully loads with pre-set dimensions from the incoming source but then gets overridden by the errorHandler, resulting in new width='45' and height='41'. These dimensions should only be applied when the source URL fails to load. The example source is .

javascripthtmlcssajaxreactjs

Answer №1

Make sure to double-check your code as there may be some missing elements.

const handleImageError = e => {
    e.target.onerror = null;
    e.target.src = 'factory2.svg';
    e.target.width = 45;
    e.target.height = 41;
};

items.map(item => {
   if(item.data) {
// Ensure the image source is correct and proper size value assignment  
       <img src={`${item.data}?size=20`} onError={handleImageError} />
//The conditional statement should be properly closed with a ternary operator like condition==true?true:false
   } else {
       <Logo styleName="defaultIconLogo" width={25} height={20} />
   }

})

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

Troubleshooting Authentication Problems with Next.js and Kinde

'use client' const { useState } = require('react'); const Link = require('next/link'); const Image = require('next/image'); const { RegisterLink, LoginLink, LogoutLink } = require('@kinde-oss/kinde-auth-nextjs/ ...

reactjsnext.jsserver-side-renderingcsr

Anticipated outcome is the need to provide a value upon completion of arrow function recursion (consistent-return)

If I have a recursive function like the example provided, is it possible to simply return false after the recursive foo call? function foo(fn, redo, interval = 1000) { return new Promise( (resolve, reject) => { fn() .then(resolve) ...

reactjstypescripteslinteslint-config-airbnb

Transitioning between pages causes a delay in loading the background

Today as I was working on my CSS, I encountered some issues. I utilized Bootstrap and Darkstrap for designing. In Darkstrap, the style for the body is body { color: #c6c6c6; background-color: #2f2f2f; } Meanwhile, in my own CSS: body { ...

httpcsstwitter-bootstrap

Is there a way to adjust the size of a full web page using CSS for scaling?

One handy feature in Firefox is the ability to enlarge an entire web page by pressing CTRL +. This action will proportionally increase the size of the entire webpage, including fonts and images. Is there a way to achieve similar functionality using just C ...

htmlcssresize

How can you create a basic click event for a Google Maps marker?

Can a straightforward action be triggered using jQuery or JavaScript when a user clicks on a Google Maps marker? I am attempting to load content into an external div using AJAX when a user clicks on a marker on the map. The following code snippet could se ...

javascriptjquerygoogle-maps

What could be causing the issue with React routes not functioning correctly on the server?

I'm currently developing a React application and experiencing some issues. While my routes function properly on the client side (dev-server), serving static files through Express only works for the '/' route, not '/dashboard'. Howe ...

node.jsreactjsexpressreact-routerreact-router-dom

Is there a way to display the specific information of a flatlist item in a pop-up window?

Welcome to the HomesScreen.js! This section handles rendering the flat list elements. import { StatusBar } from 'expo-status-bar'; import { Button, Image, Modal, StyleSheet, Text, TouchableOpacity, View } from 'react-native'; import { ...

javascriptreactjsreact-nativereact-native-flatlist

Is it common for my Delete modalForm to consistently remove the initial object in the dataModel every time? (Django

After creating a modal using Bootstrap to delete user entries in a list view, I encountered an issue where the delete button always removed the first object and the modal never closed. How can I ensure that each entry's delete button deletes only that ...

javascripthtmldjangobootstrap-4django-templates

Update the Firebase .on listener in a React component to target a new child while ceasing to listen for updates on the previous child

I am currently in the process of implementing Firebase for a chat application. My goal is to set up a listener on the selected message to check for any new incoming messages. Within my "MessageBody" component, I have established a real-time listener usin ...

reactjsfirebasefirebase-realtime-database

When clicking on a checkbox's assigned label, Chrome and IE may experience delays in firing the change event

When a user checks a checkbox under a specific condition, I want to display an alert message and then uncheck the checkbox. To achieve this, I am utilizing the click function on the checkbox to internally uncheck it and trigger necessary events. I have a ...

javascriptjqueryhtmlgoogle-chromeinternet-explorer

Unlocking the Power of arrayFilters in MongoDB for Efficient Pipeline-Style Updates

Currently utilizing Mongo 4.4, I am attempting to execute an update operation with the aggregation pipeline using updateOne to modify nested array elements. To target a specific array member for updating, I include an arrayFilter in the options. However, e ...

javascriptarraysmongodbaggregation-frameworkmongodb-update

When invoking a native prototype method, consider extending or inheriting object prototypes for added functionality

Recently, I came across a discussion on Inheritance and the prototype chain where it mentioned: Avoiding bad practice: Extension of native prototypes One common mis-feature is extending Object.prototype or other built-in prototypes. This practice, known ...

javascriptangularjsprototype

Exploring IP and port connections using Telnet in Java or JSP

I am in the process of creating a script that uses telnet to check if a server is currently up or down by connecting to its IP address and port number. I need this code to be highly efficient as it will be used within a for loop to display information on a ...

javahtmljsp

What is the best way to use jQuery AJAX to efficiently upload a file to a PHP page

Attempting to write some JavaScript code along with AJAX for file sending technology. Here is the HTML form code: <form action="" method="post" id="contact_form" enctype="multipart/form-data"> <input type="text" name="name" id="name"> < ...

javascriptjqueryajaxfilefile-upload

Need for input

I am working on organizing my routes in a separate file from app.js. The login route requires access to a Firebase instance. routes/auth.js var express = require('express'); var router = express.Router(); module.exports = function(firebase) { ...

javascriptnode.jsexpress

Make a request for data using the .getJSON function to the

I'm slightly confused about the current situation. For example... It seems that this link is retrieving JSON data based on certain numbers specified in the URL, but I am unsure how these variables are being processed. Is there a server-side script ge ...

ajaxjsongetjson

Angular modules are designed to repeat chunks of code in a

Whenever I scroll the page, my function pushes items to an array. However, I am facing an issue where the pushed items are repeating instead of adding new ones. Solution Attempt onScroll(): void { console.log('scrolled'); var i,j,newA ...

javascriptangulartypescript

Attempting to refresh Facebook Open Graph meta tags through client-side jquery and ajax requests

My current approach involves using ajax to load a content page containing a Facebook Like Button plugin. However, I am encountering an issue regarding the extraction of meta information by Facebook when a user likes the page. I am unsure of how to assign ...

jqueryajaxfacebook

Strategies for handling divisions while resizing the browser界面 manipulating divisions during

Here's the HTML/CSS code I'm working with: .container { max-width: 900px; margin: 0 auto; margin-top: 30px; } .divisions { border: 1px solid Black; } .Fisrt-Line { height: 180px; } .First { background-color: Green; width: 32.2% ...

htmlcss

transferring the information through the $scope parameter

After retrieving data from my web service, I am storing it in my scope variable like this: then(function (Tlist) { $scope.Tlist=Tlist.data; }) I then display this data in a table, where I can select rows using checkbox ...

javascriptangularjsscope