From b7bb1b4f3e5d567cd840251e7e95d15a17b154ca Mon Sep 17 00:00:00 2001
From: builder_247 <14019974+builder-247@users.noreply.github.com>
Date: Fri, 23 Aug 2024 17:00:15 +0300
Subject: [PATCH] Replace object tag

---
 .../Visualizations/inflictorWithValue.jsx     | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/components/Visualizations/inflictorWithValue.jsx b/src/components/Visualizations/inflictorWithValue.jsx
index 42dffd9f13..ba414e9e99 100644
--- a/src/components/Visualizations/inflictorWithValue.jsx
+++ b/src/components/Visualizations/inflictorWithValue.jsx
@@ -70,17 +70,16 @@ display: inline-block;
     height: 10px;
     white-space: nowrap;
 
-    object, img {
+    img {
       height: 18px;
       width: 25px;
     }
   }
   &.neutral {
-    > object, > img {
+    > img {
       height: 30px;
       width: 30px;
       border-radius: 15px;
-      object-fit: cover;
       position: relative;
       bottom: 1px;
     }
@@ -169,19 +168,24 @@ class InflictorWithValue extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = { showTooltip: false };
+    this.state = { showTooltip: false, imageError: false };
   }
   setShowTooltip = () => {
     if (!this.state.showTooltip) {
       this.setState({ showTooltip: true });
     }
   };
+  setImageError = (state) => {
+    this.setState({ imageError: state });
+  }
 
   render() {
     const {
       inflictor, value, type, ptooltip, abilityId, strings, charges,
     } = this.props;
 
+    const { imageError } = this.state;
+
     const resolvedInflictor = (abilityId && abilityIds && abilityIds[abilityId]) || String(inflictor);
     if (resolvedInflictor) {
       const ability = abilities && abilities[resolvedInflictor];
@@ -216,6 +220,8 @@ class InflictorWithValue extends React.Component {
         tooltip = ptooltip;
       }
 
+      const fallbackImage = '/assets/images/Dota2Logo.svg';
+
       return (
         <StyledDiv>
           <div
@@ -225,9 +231,17 @@ class InflictorWithValue extends React.Component {
             onMouseEnter={this.setShowTooltip}
           >
             {(!type || type === 'purchase' || type === 'backpack' || type === 'neutral') &&
-              <object data={image} height="27px" width={ability ? '27px' : '37px'} type="image/png">
-                <img src="/assets/images/Dota2Logo.svg" alt="Dota 2 Logo" style={{ filter: 'grayscale(60%)', height: '27px' }} />
-              </object>}
+              <img
+                src={imageError ? fallbackImage : image}
+                alt={imageError ? "Dota 2 Logo" : ""}
+                height="27px"
+                style={{
+                  filter: imageError ? 'grayscale(60%)' : null
+                }}
+                width={(ability || imageError) ? '27px' : '37px'}
+                onError={() => this.setImageError(true)}
+              />
+            }
             {type === 'buff' &&
               <div
                 className="buff"