fix image rendering by skipping the background in the css and directl…

…y using an img tag
xebia · Dec 17, 2024 · f80aa68 · f80aa68
1 parent f817a84
commit f80aa68
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/src/pages/Index.jsx b/src/pages/Index.jsx
@@ -7,7 +7,7 @@ const Index = () => {
   const [feedCounts, setFeedCounts] = useState({});
   const [totalItemCount, setTotalItemCount] = useState(0);
 
-  const REACT_APP_NODE_ENV = "bla";
+  const REACT_APP_NODE_ENV = "unknown";
   const buildNumber = import.meta.env.REACT_APP_BUILDNUMBER || 'unknown';
 
   useEffect(() => {

diff --git a/src/pages/Skus.jsx b/src/pages/Skus.jsx
@@ -94,7 +94,7 @@ const Skus = () => {
               >
                 <h3>{item.title}</h3>
                 {!item.videoUrl && <div className="coming-soon-small">Video coming soon</div>}
-                {item.videoUrl && <div className="play"></div>}
+                {item.videoUrl && <div className="play"><img src="play-button.png" className="img-play"></img></div>}
               </div>
             ))
           }
@@ -114,7 +114,7 @@ const Skus = () => {
               >
                 <h3>{item.title}</h3>
                 {!item.videoUrl && <div className="coming-soon-small">Video coming soon</div>}
-                {item.videoUrl && <div className="play"></div>}
+                {item.videoUrl && <div className="play"><img src="play-button.png" className="img-play"></img></div>}
               </div>
             ))
           }
@@ -129,7 +129,7 @@ const Skus = () => {
             <div key={item.id} className="video-box" onClick={() => handleClick(item.id)}>
               <h3>{item.title}</h3>
               {!item.videoUrl && <div className="coming-soon-small">Video coming soon</div>}
-              {item.videoUrl && <div className="play"></div>}
+              {item.videoUrl && <div className="play"><img src="play-button.png" className="img-play"></img></div>}
             </div>
           ))}
           </div>

diff --git a/src/styles.css b/src/styles.css
@@ -445,14 +445,18 @@ h1 {
     position: absolute;
     bottom: 29px;
     left: 36%;
-    background-image: url(play-button.png);
     height: 30px;
     width: 30px;
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
 }
 
+.video-box .play .img-play {
+    height: 100%;
+    width: 100%;
+}
+
 .video-box .coming-soon-small {
     position: absolute;
     bottom: 30px;