Я борюсь с загрузкой изображений с помощью img-тега внутри компонента React.В основном я использую url-загрузчик webpack для загрузки изображений и добавления хэша (чтобы избежать проблем с кэшированием в дальнейшем).При запуске «npm run dev» создается пакет и файл изображения создается в указанной подпапке «images».Тем не менее, Chrome не может найти изображение и выдает следующую ошибку:
GET http://localhost:8000/images/49b281dc3f9e139385f943c7e3f918b1-git.jpeg 404 (не найдено)
Более конкретно: «Комплект»main.js "создается в папке внешнего интерфейса (как указано в index.html) и содержит подпапку" images "с файлом, созданным загрузчиком URL: 49b281dc3f9e139385f943c7e3f918b1-git.jpeg
Я попытался загрузитьизображение с css, которое работает (т.е. отображается в браузере), однако в этом случае кажется, что url-загрузчик не используется, так как хеш не добавляется и файл загружается из исходного местоположения, а не из местарасслоение.
Я видел другую ветку на эту тему ( Как загрузить файлы изображений с помощью загрузчика файлов webpack ), но не могу понять, как publicpath должен помочь в моем случае.Эта проблема также может быть связана с моей настройкой Django: я поместил приложение внешнего интерфейса в проект Django, где находится весь материал React (следуя этому руководству: https://www.youtube.com/watch?v=GieYIzvdt2U и его исходный код: https://github.com/bradtraversy/lead_manager_react_django)
Это webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /.*\.(gif|png|jpe?g)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8000,
name: 'images/[hash]-[name].[ext]'
},
},
]
}
]
}
};
Это index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
<title>Title</title>
</head>
<body>
<div id="app"></div>
{% load static %}
<script src="{% static "frontend/main.js" %}"></script>
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Реагирующий компонент MainHeader.js
import React, {Component} from 'react';
import logo from '../../../static/img/git.jpeg';
class MainHeader extends Component {
render() {
return (
<div className="container">
<nav className="navbar navbar-expand-sm navbar-light">
<img src={logo} className="img-fluid" alt="Logo" width={800} height={800}/>
<a className="navbar-brand" href="#">Title</a>
<button className="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse d-flex justify-content-end" id="navbarSupportedContent">
<ul className="navbar-nav">
<li className="nav-item active">
<a className="nav-link" href="#">Welcome, customer!<span className="sr-only">(current)</span></a>
</li>
<li className="nav-item dropdown">
<a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div className="dropdown-menu" aria-labelledby="navbarDropdown">
<a className="dropdown-item" href="#">Action</a>
<a className="dropdown-item" href="#">Another action</a>
<div className="dropdown-divider"></div>
<a className="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
);
}
}
export default MainHeader;
My App.js:
import React, { Component } from 'react';
import { Fragment } from 'react';
import ReactDOM from 'react-dom';
import Header from './layout/Header';
import Dashboard from './analytics/Dashboard';
import MainHeader from "./layout/MainHeader";
class App extends Component {
render() {
return (
<Fragment>
<MainHeader/>
<Header />
<div className="container">
<Dashboard/>
</div>
</Fragment>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
Это мои статические настройки файла в settings.py Django:
STATIC_ROOT = os.path.join(BASE_DIR, "..", "www", "static")
STATIC_URL = '/static/'