我正在努力使用 React 组件中的 img-tag 加载图像。基本上我使用 webpack 的 url 加载器来加载图像并添加哈希（以避免以后出现缓存问题）。运行“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-loader，因为没有添加哈希并且文件是从原始位置加载的，而不是捆绑的地方。
我看到了有关该主题的另一个线程（如何使用 webpack file-loader 加载图像文件），但看不到 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;
我的 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'));
这些是我在 Django 的 settings.py 中的静态文件设置：
STATIC_ROOT = os.path.join(BASE_DIR, "..", "www", "static")
STATIC_URL = '/static/'
我在 Django 设置中尝试了许多更改，但没有一个让应用程序查看图像文件所在的文件夹（http://localhost:8000/static/frontend/images/）
最后，唯一成功的是将以下内容添加到 webpack.config.js
output: {
filename: "main.js",
publicPath: "/static/frontend/"
},
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句