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

Question

Мой каталог выглядит так:

-PROJECT
   - app
     -assets
      -image1.png
      -image2.jpg
      -image3.png
     -components
     -reducers
   -node_modules (on .gitignore)
   -public
     -bundle.js
     -bundle.js.map
     -favicon.ico
     -index.html
     -style.css
   -server
   .babelrc
   .gitignore
   webpack.config.js

Теперь мой webpack.config. js выглядит следующим образом:

'use strict';

const { resolve } = require('path');

module.exports = {
  entry: ['babel-polyfill', './app/main'],
  output: {
    path: __dirname,
    filename: './public/bundle.js',
  },
  mode: 'development',
  context: __dirname,
  devtool: 'source-map',
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /jsx?$/,
        include: resolve(__dirname, './app'),
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [{ loader: 'file-loader', options: {} }],
      },
    ],
  },
};

И мой дом. js компонент:

import React, { Component } from 'react';
import logo from '../assets/image2.jpg';

class Home extends Component {
  render() {
    return (
      <div className="home">
        <h1>name</h1>
        <p>something</p>
        <img id="imgHome" src={logo} />
      </div>
    );
  }
}

* Если я использую адрес изображения из браузера, он работает нормально, но я пытаюсь использовать локальные изображения и ничего не показывает. Я также попытался переместить изображения в папку publi c, а также попытался использовать синтаксис require (''). src = {require ('../ assets / image2.jpg')} тоже не работает. * Также я заметил, что путь был прочитан, потому что, когда я запускаю сервер, он показывает get .jpg.

pYYj <—— 200 OK 1.79 MB application/javascript; charset=UTF-8 (<—> 145.5 ms)
UO13 ——> GET /aba2c31a13e0d6336220931199bf46c3.jpg 
UO13 <—— 200 OK 231 B text/html; charset=UTF-8 (<—> 1.7 ms)
HkSa ——> GET /favicon.ico 
HkSa <—— 200 OK 6.24 KB image/x-icon (<—> 1.6 ms)
6tQo ——> GET / 
6tQo <—— 304 Not Modified (<—> 1.7 ms)
fOce ——> GET /style.css 
fOce <—— 304 Not Modified (<—> 1.5 ms)
cWVD ——> GET /bundle.js 
cWVD <—— 304 Not Modified (<—> 2.2 ms)

Надеюсь, кто-то может мне помочь!

Answer 1

Что вы можете попробовать: переместить папку ресурсов в папку publi c. Затем из тега img обращайтесь к изображениям вроде: src = ''. /assets/image1.png '' Я надеюсь, что это работает

Answer 2

Почему вы импортируете изображение? Попробуйте использовать его в качестве URL-адреса в вашем элементе:

<img id="imgHome" src="assets/image2.jpg">

Переместите папку ресурсов в общедоступную c, и это должно работать