При использовании «serve -s build» для приложения реагирования stati c img не отображается

Question

первый постер, поэтому, пожалуйста, дайте мне знать, какую другую информацию я могу дать, чтобы помочь. Я ходил кругами со странной реакцией.

Проблема

Вот скриншот проблемы

Как вы можете видеть на прилагаемом изображении, хотя вкладка элемента проверки консоли показывает, что img sr c читается правильно (img даже отображается при наведении курсора на sr c в консоли), для некоторых причина, по которой изображение не отображается там, где оно выделено.

Это происходит, когда я запускаю npm, начиная с "serve -s build" в качестве конфигурации. Когда я выполняю «npm start» с оригинальным «start-scripts start», imgs отображаются правильно.

Другая странная вещь заключается в том, что на приведенном выше снимке экрана я могу отобразить нужное изображение над этими картами. Значит, он обслуживается правильно, но каким-то образом портит мои css изображения, которые должны отображаться на карточках?

Я выполнил 'npm run-script build' также до запуска npm start, но происходит то же самое.

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",
  },

Навыки. 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>
)

Навыки. css

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

.skill-card {
height: 550px;
}

Я не могу найти много документации для пакета подачи, поэтому не могу понять, почему изображения stati c не обслуживаются должным образом. У кого-нибудь есть идея? Спасибо заранее!

Справочная информация - Почему я даже использую npm пакет подачи?

Когда я получил доступ https://localhost: 3000, Я получил бы сообщение «Ошибка приложения React: не удалось создать« WebSocket »: небезопасное соединение WebSocket не может быть инициировано со страницы, загруженной по HTTPS». Такая же ошибка выдает, когда я разверну его на героку, и получу доступ по https. Я следовал решениям, перечисленным в этой проблеме переполнения стека. и установке пакета обслуживания и изменении пакета. json было единственным решением, которое я смог найти для этой проблемы.

Answer 1

Итак, после 2 месяцев избегания этой проблемы, я только что обнаружил, что это простое CSS исправление.

Я не совсем уверен, почему, но всякий раз, когда я собирал проект, будь то "npm build-scripts build" или "npm run-scripts build", это каким-то образом меняло мою прозрачность до 1%. Мне потребовалось так много времени, чтобы просто проверить CSS элемента, потому что я не ожидал, что он изменит свойства CSS из сборки.

Мои CSS для изображений, которые не отображаются, выглядят как это:

.card img {непрозрачность: 90%; z-индекс: 100; }

Очень просто, но после сборки это выглядело так:

.card img {opacity: 1%; z-индекс: 100; }

Способ, который я решил, состоял в том, чтобы просто полностью удалить свойство opacity из .card img css. Если бы я вообще использовал свойство непрозрачности, он просто переключился бы на 1% при сборке.

.card img {z-index: 100; }

Я не уверен, почему это происходит, но рад, что это исправлено.