Изображения не загружаются с помощью Spree и webpacker - PullRequest
Новая
       7

Изображения не загружаются с помощью Spree и webpacker

0 голосов
/ 03 ноября 2019

У меня проблема с изображениями, которые не загружаются в моей конфигурации solidus (форк Spree) - Rails 5.1.4, solidus 2.4.2, webpacker 4.0.2. Я реализовал интерфейс реагирования с реактивными рельсами 2.5.0

Мой (текущий) файл development.js для конфигурации веб-пакета разработки: 

process.env.NODE_ENV = process.env.NODE_ENV || "development";

const environment = require("./environment");

const config = {
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              limit: false,
              name: "./packs/images/[name].[ext]",
              outputPath: "images"
            }
          }
        ]
      }
    ]
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: "#eval-source-map"
};

environment.config.merge(config);

module.exports = environment.toWebpackConfig();

Вот мой _products.html.erb - Вкл. на этой странице изображение загружается из erb, но должно иметь префикс media вместо images. Он также загружает реальный код реакции для компонента, но не изображения. 

<%= react_component("index.ProductCard", { product: @products.first, image: @products.first.display_image }) %>
<%= image_tag asset_pack_path 'media/images/genericShirt.jpeg' %>

и мой ProductCard.js: 

import React, { FC, useState } from "react";

import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
import Modal from '@material-ui/core/Modal';

import { Card, CardActionArea, CardContent, CardMedia, Typography } from '@material-ui/core';

import * as styles from './ProductShow.style'

import generic from "../../../images/genericShirt.jpeg"

interface Props {
  product: Product;
  image: Image;
}

interface Image {
  id: string;
  attachment_file_name: string;
}

interface Product {
  id: string;
  name: string;
  description: string;
  price: number;
  available_on: string;
  deleted_at: string;
  slug: string;
  meta_description: string;
  meta_keywords: string;
  tax_category_id: number;
  shipping_category_id: number;
  created_at: string;
  updated_at: string;
  promotionable: string;
  meta_title: string;
  origin_store: string;
  origin_country: string;
}

const ProductShow: FC<Props> = ({ product }) => {
  const [open, setOpen] = useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <CardActionArea onClick={handleOpen}>
        <CardMedia
          title={product.name}
          image={generic}
        />
        <CardContent>
          <Typography variant="body2" color="textSecondary" component="p">
            {product.name}
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            PRODUCT PRICE
            {product.price}
          </Typography>

          <Typography variant="body2" color="textSecondary" component="p">
            PRODUCT IMAGE
              <img src={"../../../images/genericShirt.jpeg"} />
          </Typography>
        </CardContent>
      </CardActionArea>

      <Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        css={styles.modal}
        open={open}
        onClose={handleClose}
        closeAfterTransition={true}
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500,
        }}
      >
        <Fade in={open}>
          {/* <div css={styles.paper}>
            <h2 id="transition-modal-title">Transition modal</h2>
            <p id="transition-modal-description">react-transiton-group animates me.</p>
          </div> */}
          <Card>
            <Typography variant="body2" color="textSecondary" component="p">
              {product.name}
            </Typography>
          </Card>
        </Fade>
      </Modal>
    </div>
  );
}

export { ProductShow };

У меня также есть в моем application.jsстрока: 

require.context("../images", true, /\.(png|jp(e*)g|gif|svg)$/);

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

...