使用“serve -s build”来提供反应应用程序时，静态 img 不显示

Question

first time poster, so please let me know what other information I can give to help. I've been going in circles with a strange react issue.

The Problem

Here's a screenshot of the problem

As you can see in the image attached, even though the console inspect element's tab shows that the img src is being read properly (the img is even shown on hover of the src in the console), for some reason the image isn't showing up where it is highlighted on the dom.

This happens when I run npm start with "serve -s build" as the configuration. When I execute "npm start" with the original "react-scripts start", the imgs show up properly.

Another strange thing is that, in the screenshot above, I am able to display the desired image above those cards. So it is being served to the dom correctly, but somehow serve is messing up my css for the images that should show up on the cards?

I've ran 'npm run-script build' as well before running npm start, but the same thing happens.

package.json

 "dependencies": {
    "react-scripts": "^3.3.0",
    "serve": "^11.3.0",
  },
  "scripts": {
    "start": "serve -s build",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
  },

Skills.js

import './Skills.css';
import frontEndImage from '../../images/front-end.png';
import languagesImage from '../../images/languages.png';
import backendImage from '../../images/backend.png';
import miscellaneousImage from '../../images/miscellaneous.png';
let Skills = () => {

return (
    <div className="container">
        <h1 className="subheader lh-title pb5">Skills</h1>
        <div className="ml4 flex flex-wrap justify-center">
            <img src={backendImage} alt="header"/>
            <div className="skill-card card">
                <img src={backendImage} alt="header"/>
                <div className="experience-content">
                    <h1> Back End </h1>
                    {backSkill}
                </div>
            </div>
        </div>
    </div>
)

Skills.css

.card img {
opacity: 80%;
z-index: 100;
}

.skill-card {
height: 550px;
}

I can't find a lot of documentation for the serve package, so I can't understand why the static images are not being served properly. Anyone have an idea? Thanks ahead of time!

Background - Why am I even using npm serve package?

When I accessed https://localhost:3000 , I would get a security "React app error: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS". Same error throws when I deploy it to heroku, and access with https. I followed the solutions listed at this stackoverflow issue. and installing serve package and changing the package.json was the only solution that I could find for that problem.

Answer 1

So after 2 months of avoiding this problem, I just found out that it's a simple CSS fix.

I'm not entirely sure why, but whenever I built the project, whether it was with "npm react-scripts build" or "npm run-scripts build", it somehow toggles my opacity to 1%. It took me so long just to inspect the element's CSS because I was not expecting it to change the CSS properties from a build.

My CSS for the images that were not showing up looked like this:

.card img { opacity: 90%; z-index: 100; }

Very simple, but after the build it looked like this:

.card img { opacity: 1%; z-index: 100; }

The way I solved this was just to remove the opacity property from .card img css entirely. If I use the opacity property at all, it would just toggle to 1% on build.

.card img { z-index: 100; }

I'm not sure why this is happening, but glad it's fixed.

Answer 2

percentages is not valid value for opacity and build script fix it (I agree to transform it to 1% is not the best way but anyway) just don't use percentages, use value from 0.0 - 1.0 as it is described here .

So instead of

.card img { opacity: 90%; z-index: 100; }

You must have

.card img { opacity: 0.9; z-index: 100; }