Реагируйте, изображения не загружаются на странице мультисайта

Question

Я разрабатываю многостраничный сайт в React.Проблема в том, что при переходе с одной страницы на другую я теряю изображения.Они отлично работают на корневой странице "/", но когда я перехожу на другую страницу (company1), логотип теряется.

В консоли браузера я ТОЛЬКО получаю сообщение об ошибке при переходе к company1: company1.jpg:1 GET http://localhost:8080/company/images/company1.jpg 404 (Not Found)

Я не вижу, что здесь не так - я 'm импортирование изображений непосредственно в компонент Navbar.js.

Моя файловая структура

└public
│   + index.html  
|
└src
|   └───components
|   │       +  Navbar.js
|   |       +  Footer.js
|   |
|   └───img
|   │   └───companies
|   |   |    +  company1.jpg
|   |   |    +  company2.jpg
|   |   + logo.png
|   │   
|   └───pages
|   |     +  Home.js
|   |     +  Company1.js
|   |     +  Company2.js
|   |
|   └───routes
|   │     +  AppRouter.js
|   │
|   +  app.js
|
+ webpack.config.js

routs / AppRouter.js

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Footer from "../components/Footer";
import Home from "../pages/Home";
import Company1 from "../pages/Company1";
import Company2 from "../pages/Company2";

const AppRouter = () => (
  <BrowserRouter>
    <div>
      <Switch>
        <Route path="/" component={Home} exact={true} />
        <Route path="/company/company1" component={Company1} />
        <Route path="/company/company2" component={Company2} />
      </Switch>
      <Footer />
    </div>
  </BrowserRouter>
);

export default AppRouter;

/ pages / Home.js

import React from "react";
import Navbar from "../components/Navbar";
export default class Home extends React.Component {
  render() {
    return (
      <div>
        <Navbar company="GROUP PAGE" />
      </div>
    );
  }
}

/ pages / Company1.js

import React from "react";
import Navbar from "../components/Navbar";
const Company1 = () => (
  <div>
    <Navbar company="Company1" />
  </div>
);

export default Company1 ;

/ components / Navbar.js

import React from "react";
import { Link } from "react-router-dom";
import logo from "../img/logo.png";

const Navbar = props => (
  <nav>
      <Link className="navbar-brand to="/">
        <img src={logo} width="120" height="50" alt="group" />
        <span>{props.company}</span>
      </Link>
  </nav>
);

export default Navbar;

webpack.config.js

const path = require("path");
module.exports = {
  entry: "./src/app.js",
  output: {
    path: path.join(__dirname, "public"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        loader: "babel-loader",
        test: /\.js$/,
        exclude: /node_modules/
      },
      {
        test: /\.s?css$/,
        use: ["style-loader", "css-loader", "sass-loader"]
      },
      {
        test: /\.(png|jp(e*)g|svg)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 8000, // Convert images < 8kb to base64 strings
              name: "images/[hash]-[name].[ext]"
            }
          }
        ]
      }
    ]
  },
  devtool: "cheap-module-eval-source-map",
  devServer: {
    contentBase: path.join(__dirname, "public"),
    historyApiFallback: true
  }
};

Answer 1

Если изображения находятся в папке src / assets, вы можете использовать require.

const img = require('../../img.png');

Вы также можете сделать это inline

<img src={require('../../img.png')} />