Почему загрузка изображений не работает в chrome, тогда как в Mozilla загружается в CSS3? - PullRequest
Новая
       11

Почему загрузка изображений не работает в chrome, тогда как в Mozilla загружается в CSS3?

0 голосов
/ 19 июня 2020

На прошлой неделе я начал работать над своим проектом, используя реакцию с веб-пакетом, но CSS усложняет мою жизнь, я установил веб-пакет, и он работал хорошо. Когда я пришел к стилю, я установил фоновое изображение div, но он отказался загружаться в браузере Chrome и chrome, но в mozilla firefox он загружается. Я даже удалил хром и переустановил его снова, но проблема все еще существует. Я удалил данные просмотра из хрома, но проблема все еще существует.

Мои коды:

Вот мой CSS: 


    .full-div {
      background: url("../img/slides/slide-1.jpg") center center fixed no-repeat;
      height: 100vh;
      width: 100vw;
    }

И мои коды реакции: 


    import React, { Component } from 'react';
    import customMsg from '../utils/customMessages';

    class HomePage extends Component {
      constructor() {
        super();
        this.state = {};
      }

      render() {
        const { welcomeMessage } = customMsg;
        return (
          <div className="full-div">
            <h1>{welcomeMessage}</h1>
            <img alt="foto1" src="../assets/img/slides/slide-2.jpeg" />
          </div>
        );
      }
    }

    export default HomePage;

Настройка фонового изображения в CSS3 не работает в chrome, а загрузка img с <img alt="foto1" src="../assets/img/slides/slide-2.jpeg" /> тоже не работает.

Вот моя конфигурация webpack: 


    const HtmlWebPackPlugin = require('html-webpack-plugin');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    const path = require('path');
    require('dotenv').config();

    module.exports = (env) => ({
      context: __dirname,
      entry: './src/entry/index.js',
      output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'descholar.js',
        publicPath: '/',
      },
      mode: env ? 'production' : 'development',
      devServer: {
        inline: true,
        port: process.env.PORT,
        contentBase: path.join(__dirname, 'build'),
      },

      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: ['babel-loader'],
          },
          {
            test: /\.(css)$/,
            exclude: /node_modules/,
            loader: ['style-loader', 'css-loader'],
          },
          {
            test: /.(jpg|jpeg|png|gif|svg)$/,
            use: ['file-loader',
              {
                loader: 'image-webpack-loader',
                options: {
                  mozjpeg: {
                    progressive: true,
                    quality: 65,
                  },
                  // optipng.enabled: false will disable optipng
                  optipng: { enabled: false },
                  pngquant: {
                    quality: '65-90',
                    speed: 4,
                  },
                  gifsicle: { interlaced: false },
                  // the webp option will enable WEBP
                  webp: { quality: 75 },
                },
              },
            ],
          },
        ],
      },
      plugins: [
        new HtmlWebPackPlugin({
          template: path.resolve(__dirname, 'public/index.html'),
          filename: 'index.html',
        }),
        new MiniCssExtractPlugin({
          filename: '[name].css',
          chunkFilename: '[id].css',
        }),
      ],
      performance: {
        hints: false,
      },
    });

Я даже переустановил свой проект с помощью create-react-app, но проблема все еще существует, это означает, что, вероятно, в моей настройке нет никаких проблем, возможно, проблема в браузере, кто-нибудь знает что-нибудь об этой проблеме? Или мне следует открыть вопрос об ответном официальном репо!

Я прочитал этот вопрос CSS работает в Firefox, но не Chrome, но это не мой случай

1 Ответ

0 голосов
/ 19 июня 2020

Вы должны попробовать импортировать изображения, например:

import slide-1 from '../img/slides/slide-1.jpg'

После импорта вы можете использовать его в файле JS, выполнив:

<img src={slide-1} alt="Slide1" />

Согласно create-react-app docs 

You can import a file right in a JavaScript module. This tells webpack 
to include that file in the bundle. Unlike CSS imports, importing a file 
gives you a string value. This value is the final path you can reference 
in your code, e.g. as the src attribute of an image or the href of a link 
to a PDF.
...