使用“serve -s build”服务 React 应用程序时，静态 img 不显示答案

【问题标题】：When using "serve -s build" to serve react app, static img does not show up使用“serve -s build”服务 React 应用程序时，静态 img 不显示
【发布时间】：2020-05-16 10:54:29
【问题描述】：

第一次发帖，所以请让我知道我可以提供哪些其他信息来提供帮助。我一直在纠结一个奇怪的反应问题。

问题

Here's a screenshot of the problem

正如您在所附图片中看到的那样，即使控制台检查元素的选项卡显示正在正确读取 img src（img 甚至显示在控制台中的 src 悬停时），由于某种原因，图像'没有显示在 dom 上突出显示的位置。

当我以“serve -s build”作为配置运行 npm start 时会发生这种情况。当我使用原始的“react-scripts start”执行“npm start”时，imgs 会正确显示。

另一个奇怪的事情是，在上面的屏幕截图中，我能够在这些卡片上方显示所需的图像。所以它被正确地提供给 dom，但是不知何故，服务弄乱了我的 css 以获取应该显示在卡片上的图像？

我在运行 npm start 之前也运行了“npm run-script build”，但同样的事情发生了。

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;
}

我找不到很多关于 serve 包的文档，所以我不明白为什么不能正确地提供静态图像。有人有想法吗？提前谢谢！

背景 - 为什么我还要使用 npm serve 包？

当我访问 https://localhost:3000 时，我会收到安全提示“React 应用程序错误：无法构造 'WebSocket'：可能无法从通过 HTTPS 加载的页面启动不安全的 WebSocket 连接”。当我将它部署到 heroku 并使用 https 访问时，也会引发同样的错误。我遵循this stackoverflow issue. 中列出的解决方案，安装 serve 包并更改 package.json 是我能找到的解决该问题的唯一解决方案。

【问题讨论】：

标签： node.js reactjs image build

【解决方案1】：

所以在避免这个问题 2 个月后，我才发现这是一个简单的 CSS 修复。

我不完全确定为什么，但是每当我构建项目时，无论是 “npm react-scripts build”或“npm run-scripts build”，它以某种方式将我的不透明度切换为 1%。我花了很长时间才检查元素的 CSS，因为我没想到它会从构建中更改 CSS 属性。

我的未显示图像的 CSS 如下所示：

.card img { 不透明度：90%； z 指数：100； }

非常简单，但是构建后它看起来像这样：

.card img { 不透明度：1%； z 指数：100； }

我解决这个问题的方法只是从 .card img css 中完全删除 opacity 属性。如果我完全使用 opacity 属性，它只会在构建时切换到 1%。

.card img { z 指数：100； }

我不确定为什么会发生这种情况，但很高兴它已修复。

【讨论】：

【解决方案2】：

percentages 不是不透明度的有效值并构建脚本修复它（我同意将其转换为 1% 不是最好的方法，但无论如何）只是不要使用百分比，使用 0.0 - 1.0 之间的值，正如它所描述的 @ 987654321@.

所以不是

.card img { 不透明度：90%; z 指数：100； }

你必须有

.card img { 不透明度：0.9; z 指数：100； }

【讨论】：