使用Webpack的页面中未加载React本地图像
基础概念
Webpack 是一个流行的模块打包工具，用于构建和优化前端资源。它可以将多个 JavaScript 模块、CSS 文件、图像等打包成一个或多个文件，以便在浏览器中使用。
React 是一个用于构建用户界面的 JavaScript 库。在 React 中，你可以使用本地图像作为组件的背景或内容。
问题描述
在使用 Webpack 打包的 React 页面中，本地图像未能正确加载。
可能的原因及解决方法
1. 配置问题
原因：Webpack 配置可能未正确处理图像文件。
解决方法：
确保在 webpack.config.js 中配置了正确的 loader 来处理图像文件。例如，使用 file-loader 或 url-loader：
// webpack.config.js
module.exports = {
// 其他配置...
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
},
},
],
},
],
},
};2. 图像路径问题
原因：图像路径可能不正确，导致 Webpack 无法找到并加载图像。
解决方法：
确保在 React 组件中正确引用图像路径。例如：
import React from 'react';
import myImage from './path/to/my-image.png';
const MyComponent = () => {
return <img src={myImage} alt="My Image" />;
};
export default MyComponent;3. 图像文件损坏或格式不支持
原因：图像文件可能已损坏或格式不被 Webpack 支持。
解决方法：
检查图像文件是否完好，并确保其格式（如 PNG、JPEG、GIF）被 Webpack 支持。
示例代码
以下是一个完整的示例，展示如何在 React 组件中使用本地图像：
// webpack.config.js
module.exports = {
// 其他配置...
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
},
},
],
},
],
},
};
// MyComponent.js
import React from 'react';
import myImage from './path/to/my-image.png';
const MyComponent = () => {
return <img src={myImage} alt="My Image" />;
};
export default MyComponent;参考链接
通过以上配置和代码示例，你应该能够解决在使用 Webpack 的页面中未加载 React 本地图像的问题。如果问题仍然存在，请检查控制台中的错误信息，以便进一步诊断问题。
相关·内容
1回答
我刚开始使用React，而webpack和我似乎无法将图片从我的资源目录加载到我需要它的react文件中。它显示在本地服务器上，但当我在我的github页面上运行它时，图像没有正确加载
这段代码在本地服务器上运行良好。
Portfolio.jsx
<img src="../assets/hood.png"/>
有没有办法从React文件中获取我的资产目录？
这是我的主页：
浏览 15提问于2017-01-21得票数 1
回答已采纳
1回答
我正在尝试预加载/预取一个图像，这样我就不必在准确的时刻连接到互联网上来显示图像。这是我的应用程序中的一个“你离线”页面。
我的应用程序是用React写的，我用webpack做我的包。
我在网上读到webpack的神奇评论功能也许能做到这一点。
这对我没用。
我试图预加载/预取的图像没有显示，也没有添加到DOM中的<link rel标记。
在这里签出演示存储库：
package.json：
"devDependencies": {
"@babel/core": "^7.19.6",
"@babel/preset-
浏览 2提问于2022-10-21得票数 0
1回答
我正在努力在我的react应用程序中显示本地图像。我使用require()函数在我的渲染方法中调用图像，如下所示：
<img src={require('../../assets/svg/ic_planning.svg')} />
即使导入图像也不起作用，例如：
import icon from '../../assets/svg/ic_planning.svg'
<img src={icon} />
在我的webpack.config.js上，我有以下图片加载规则：
{
test: /\.(jpg|png|svg)$/,
浏览 2提问于2018-03-24得票数 0
1回答
因此，我有一个组件，它“需要”一些本地图像。该组件只显示在仪表板(主页)上，基本上图像就像仪表板背景。(就像旋转木马)。
我想要的是:当我和webpack一起构建这个应用程序时，如果我不直接打开Dahsboard页面，我不想加载包含图像的js包。例如，如果我打开/用户/等。
我应该提到，我使用了react路由器，在/上，仪表板组件加载，仪表板组件加载多个DashboardOffer组件，每个requires都是本地映像。
我试过这个：
const DashboardOffer = require('./DashboardOffer').default;
然后在我的代码中使用这样
浏览 7提问于2022-01-31得票数 0
1回答
如何配置业力以在测试时停止加载图像？我试图在我的karma.config.js中使用来自karma.config.js的解决方案：
var webpack = require('webpack');
module.exports = function (config) {
config.set({
browsers: [ 'Chrome' ],
singleRun: true,
frameworks: [ 'mocha' ],
files: [
'tests.web
浏览 4提问于2016-09-03得票数 1
回答已采纳
我创建了一个NPM包，它使用它的scss文件中的图像来显示404页。这些图像是通过background-image: url('./img.png')提供的，并且在本地开发时加载得很好。
这个包与webpack捆绑在一起，并将图片添加到该包的dist文件夹中。
当我在react项目中安装包(用create-react-app初始化)时，映像在该包中可见，如下所示：
- package-name
- dist
- components
...
index.js
img.png
当通过react-script start在本地测
浏览 1提问于2022-08-10得票数 0
回答已采纳
我在我的React应用程序中使用了4.35.3版的Webpack。
我有一个react组件，用来导入我的应用程序徽标：
<code>A0</code>
我希望加载一个不同的徽标，以应用程序的环境为基础的服务器，构建该应用程序。
例如，如果我在本地为应用程序提供服务，我将获得一个与生产中不同的徽标。
我希望将图像导入到webpack中，而不是通过服务器上的公共可访问路径导入它们，这样在应用程序环境中就不会有任何不相关的图像。
所以我试着通过webpack的构建来解决这个问题。
如何根据<code>D1</code>动态指定镜像路径？这样我就可以导入
浏览 11提问于2020-08-04得票数 1
回答已采纳
2回答
我试图从Node/webpack-dev服务器下运行的图书“-type，React.js”中获得一个简单的“你好，世界”应用程序。我没有看到任何错误，但是当我在浏览器中访问它时，页面是空白的。
以下是我如何尝试--但失败了--运行这本书的
使用以下步骤安装node和npm (改编自)：
$ mkdir ~/..local/ node - install -install$ cd ~/..local/node-install$ curl 区xz -组件=1美元/配置-前缀=~/.本地$ -j install$ curl _ sh节点-v；npm -v v7.7.4 4.1.2
从这本书
浏览 4提问于2017-03-28得票数 2
回答已采纳
我有一个用NodeJS (Express)，React和Webpack构建的全栈应用程序。当我在本地运行服务器并为公共文件夹( Webpack在其中生成资源)提供服务时，所有图像都正常工作。然而，当相同的资源被部署到Heroku，并且相同的脚本被用来在Heroku上运行服务器时，镜像就会被破坏。
对于本地和Heroku服务器，NODE_ENV都设置为production。
问题不在于哈希、图像名称、浏览器缓存或图像扩展名(png与PNG)。带有.png扩展名的图像被下载，但根本不加载，而.jpg已加载，但它们看起来像附加的屏幕截图。
本地：
知道发生了什么吗？
浏览 0提问于2018-09-18得票数 1
我已经查了好几天了，似乎什么都没有用。我有一个不能正确加载我的图像的Webpack。在网络选项卡中，我的图像返回为200响应，但当我加载页面时，图像显示为损坏。
这是我的webpack的一张照片
index.js
这是我在本地运行时看到的结果
有没有人能开导一下我？
浏览 0提问于2018-11-22得票数 2
2回答
局部图像不加载反应
、、、
非常新的存储本地资产的反应。
我用文件加载器和图像加载器配置了webpack，并将图像存储在本地，但出于某种原因，它似乎没有显示：
import React, { Component } from 'react';
import WorkItem from './work-item';
import WorkItemsArray from './work-items-array';
class Work extends Component {
render() {
return (
<div id='wor
浏览 1提问于2017-12-02得票数 1
1回答
找不到本地镜像
、、、
我在React和Django中构建了一个项目。我还使用了Webpack来加载这些更改。我想要显示本地驱动器中的图像。
我想要从中显示照片的文件位于：
myProject/brandplug/static/app/photoGrid/SampleDisplay.jsx
这些照片位于：
myProject/brandplug/static/location_photos/
index.jsx文件位于：
myProject/brandplug/static/app/index.jsx
在其中呈现React的html文件位于：
myProject/accounts/templates/index.ht
浏览 1提问于2016-04-12得票数 1
24回答
我正在构建一个小的反应应用程序，我的本地图像不会加载。像placehold.it/200x200这样的图像加载。我想可能是服务器的问题吧？
这是我的App.js
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div className="home-container">
<div className="home-con
浏览 23提问于2016-01-03得票数 219
回答已采纳
在将React应用程序部署到GitHub页面时，我遇到了一些问题。该应用程序在本地运行良好，但在完成部署的标准流程后-通过终端安装GH页面，运行npm run build/deploy等-页面无法加载。 部署是成功的，因为它在我的GitHub存储库中创建了一个环境，它给了我“查看部署”的选项，但页面就是不加载。如果我检查页面，它会显示以下错误： Failed to load resource: the server responded with a status of 404 () bundle.js:1 我的package.json看起来像这样- {
"homepage"
浏览 11提问于2020-01-30得票数 0
2回答
最近我一直在研究React。我在我的代码中遇到了一些问题，但不知道原因。 我正在尝试使用以下代码在我的网页中加载一个本地图像： import React from 'react'
import './style.css'
import Card from '../UI/Card'
const BlogPost = (props) => {
return (
<div className="blogPostContainer">
<Card>
浏览 15提问于2021-01-11得票数 0
回答已采纳
所以，突然间，盖茨比的开发给了我在VStudioCode控制台上的成功，但是，在浏览器中输入本地主机8000，页面加载我的页面非常慢！该网站的背景图像出现，但内容没有。我是太多的初学者，以了解这是如何发生的。
我附上了一张图片，以显示铬开发工具网络。这太疯狂了。webpack_hmr 15分钟，甚至1.5小时。我没必要等那么久，但它显示出来了。
这远远超出了我的技能水平。该网站仍然是超级小，只从两个页面从内容丰富的cms。
可能是什么原因造成的？不知道。
我做错什么了？
试着安装@热加载程序/hot dom，因为我的铬控制台说它无法检测react/热加载程序。
gatsby清理缓存和公
浏览 1提问于2020-08-30得票数 2
1回答
在我们的旧.jsp应用程序中，我们正在集成react。
我的react服务器正在和上的现有应用程序上运行。
我将所有必要的js & CSS文件都包含到JSP页面中。效果很好。
当我在使用延迟加载的时候，对于ex：
import('some-file.js').then(file => {
// Some work
});
在这种情况下，Webpack试图从本地主机加载块:8100而不是Dev服务器。
我正在使用react脚本进行开发和构建。
浏览 1提问于2020-05-09得票数 1
1回答
A一点背景：我从1天或2天开始学习react，所以我还不知道react模式是好是坏，但在这种情况下，我不会觉得我做错了事情。
下面是我的标题位置的小组件
import * as React from "react";
import HeaderPosition from "../interfaces/HeaderPosition";
export default class HeaderPositionComponent extends React.Component<HeaderPosition> {
constructor(props:
浏览 22提问于2018-08-05得票数 0
我尝试通过props将本地存储的图像名称传递给组件。问题是
<img src={require(`../assets/img/${iconName}.svg`)} />
不起作用。我已经使用create-react-app引导了项目。该组件如下所示：
import React from 'react';
import best from '../../assets/img/best.svg';
import cashback from '../../assets/img/cashback.svg';
import shopping
浏览 14提问于2020-05-16得票数 1
回答已采纳
我使用rails + webpack将一个bundle.js文件编译到rails资产管道中。我在/app/assets/images中放置了一个名为"main.png“的图像。如何在捆绑的React组件中访问此图像？
我正在使用shakacode的react on rails gem。
然后，我尝试使用webpack处理图像，它成功地处理了图像，并将图像放在bundle.js文件旁边。我在图像上还是得到了404。
我知道我已经很接近了，只是publicPath对于rails资产来说是错误的。这个当前的设置提供了一个本地主机:3000/webpack/main.png，它不能与rails
浏览 5提问于2016-09-10得票数 1
回答已采纳
我在我的项目中使用了一些大尺寸的npm包(slate.js)。问题是，slate (和其他npm包)会在页面加载时自动加载，即使它只在延迟加载的组件中使用。 我正在尝试避免在页面加载石板和少数其他包上加载。 到目前为止，我在我的webpack配置中使用了sideEffects和usedExports，但我无法完成任何有用的事情。Webpack仍然会自动将slate和其他npm包自动放入vendor.js，并将其注入到已发布的html文件中(我相信是通过使用HtmlWebpackPlugin ) (仅供参考，我正在使用CRA和配置覆盖，用于webpack) 我不认为这段代码有用，但这是我的we
浏览 32提问于2020-06-26得票数 0
回答已采纳
1回答
我现在想在我的asp.net页面上添加一些react组件。
它由不同的部分页面组成，这些页面也被加载到页面中。
我面临的问题是连接部分页面，webpack和react。我正在使用webpack生成一个包，其中也包含所有的react组件。
在其中一个组件中，我正在等待窗口加载事件，然后才能在div上呈现该组件，该div是部分页面的一部分。
但是，考虑到我在.cshtml上加载包，它也呈现部分页面，窗口加载函数在加载部分页面之前触发，因此在div可用之前触发。
因此，React显示一个错误，指出目标容器不可用。
我该如何解决这个问题呢？有没有一个javascript事件可以用来等待这个目标容器？
浏览 0提问于2018-06-27得票数 0
我来自javascript/react/react路由器/webpack的背景，一个clojurescript/om环境。
使用webpack &react路由器，可以拆分我的代码，并且只加载所需的javascript。例如，在/login上，我只加载显示登录页面所需的js，其他所有内容都将被忽略。
我如何与完形记录/密语相同？显然，可以将代码拆分为多个文件：
问题是如何只加载呈现当前页面所需的代码:例如，/login .使用webpack，我会手动编写require.ensure来异步加载必要的javascript来呈现特定的页面。React路由器很好地支持这一点。在clojures
浏览 0提问于2016-01-04得票数 2
回答已采纳
1回答
我是webpack的新手，当我在代码中更改内容时，我很难设置如何让webpack看我的文件。换句话说，每当我更改代码.时，我都希望页面重新加载。
我读过几个关于如何做的博客，但我似乎无法让它发挥作用。到目前为止，我可以将它捆绑在本地主机上，而不会出现问题。
到目前为止，我的情况如下：
webpack.config.js
module.exports = {
entry: [
'./src/index.js'
],
watch: true,
output: {
path: __dirname,
publicPath: '/'
浏览 0提问于2016-12-03得票数 2
1回答
我正在尝试在我的项目中使用react图标。
我的webpack档案是这样的：
import webpack from 'webpack';
import path from 'path';
const GLOBALS = {
'process.env.NODE_ENV': JSON.stringify('development'),
__DEV__: true
};
export default {
debug: true,
devtool: 'cheap-module-eval-source-map&
浏览 5提问于2016-07-08得票数 3
回答已采纳
1回答
SVGs和PNG不加载
、、、、
我正在用Webpack做一个微前端的工作。
我遇到了一个问题，所有本地的SVG和PNG都没有被Webpack5 react应用程序加载。当我这么做的时候我总能得到404。
有人能指出我做错了什么吗？
这是文件夹结构
/public
/src
/components
navbar.tsx
/assets
Logo.svg
webpack.config.js
这是我的Webpack配置。我包括资产的装载机，如Webpack文档所示。
Webpack.config.js
const HtmlWebPackPlugin = require("html
浏览 13提问于2022-11-28得票数 0
我要和webpack一起跑。我收到以下错误：
错误在./src/index.js 14:4模块解析失败:意外令牌(14:4)您可能需要一个适当的加载程序来处理这个文件类型，目前还没有配置加载程序来处理这个文件。
| ReactDOM.render(
> <HashRouter>
| <App />
| </HashRouter>,
webpack.config.js
module.exports = {
entry: path.resolve(__dirname, 'src/App.js'),
浏览 2提问于2019-08-26得票数 2
回答已采纳
Semantic-UI-React发出调试日志：
但我在浏览器中看不到它们。我使用的是semantic-ui-react 0.76.0。在我本地的语义-ui-react的npm版本中，调试行似乎被去掉了。有没有我需要的调试版本？或者我需要设置一些webpack的配置？
浏览 0提问于2018-01-15得票数 0
我正在开发一个react和Webpack 3应用程序。
我有一组SVG图标，并希望将这些图标转换为图像并将其放入图像文件夹中，这样我就可以访问这些图像并在我的react组件中使用它们。<img src='icon.png' />)。
目前，我正在将SVG作为组件导出到js中，并将其导入到JSX中。
我应该使用webpack加载器来做这件事吗？如果是，我应该使用哪个加载器？或任何其他方式？
浏览 0提问于2018-09-28得票数 3
我正在尝试将React应用程序加载到asp.Net视图(项目最初是用asp.net编写的，我正在使用React创建新页面，用于学习和娱乐)。 当React应用程序在dev move中运行时，所有图像在所有路径正常工作的情况下加载时都没有任何问题。 使用npm run build构建应用程序后，将生成js文件和相应的图像文件，我将它们放在asp.net应用程序的文件夹中(例如，脚本文件夹)。 当我尝试查看页面时，React应用程序加载并呈现屏幕，但由于网站找不到图像，所有图像都损坏了。 在查看图像未加载的原因后，由于图像试图从当前URL加载，而不是从js文件和图像存储的位置加载，导致出现404
浏览 23提问于2019-10-14得票数 0
9回答
我想知道如何与webpack建立一个内置的svg？
我在跟踪。
我使用webpack.config文件加载器正确地设置了我的。
然而，这个例子显示了使用这样的背景图像：
.icon {
background-image: url(./logo.svg);
}
它工作得很好，但是我希望有一个内联的svg映像--如何在我的react组件中包含我的logo.svg内联？
import React, { Component } from 'react'
class Header extends Component {
render() {
return (
浏览 9提问于2015-12-13得票数 55
所以我使用react-redux和webpack构建我的应用程序，它在本地运行没有任何问题。当我在heroku上部署应用程序时，图像没有显示，而是看到了一个破碎的图标。图像的路径应该是好的：
const imgPath = '../../style/imgs/cryptocurrency-icons/svg/color';
我没有收到任何与控制台中的图像相关的错误，它们只是无法加载。
这是我的项目：
heroku应用程序：
浏览 0提问于2018-01-30得票数 0
3回答
我是在一个投资组合网站上工作，与不同的客户/项目，我工作过的每个有自己的信息页面。我还没有完全确定我想要在哪里托管图像，但现在我正在构建这些单独的项目页面，希望只在本地加载图像。目前，我在编写的代码中没有收到任何错误，但是我的图像没有在浏览器中呈现。我怀疑这可能是因为没有一个<img>元素被附加到任何东西中，但老实说，我不确定。我还能错过什么？这与Webpack的吐露有关吗？
注意： img标记上的src属性正按照原样使用到public文件夹的正确路径。
App.js
import React from "react";
import { BrowserRouter
浏览 7提问于2022-11-01得票数 0
我最近从require.js搬到webpack，一些node_module有内置的.min文件。当我使用来自node_module的文件时，我只需执行require('my-module')，它就会在没有任何配置的情况下立即加载它。但是这将加载开发版本或更大的版本。
例如，react加载了require('react/addons')，但这不是小型化的版本。
我的问题是：
我是否应该正常加载模块，然后缩小所有模块的容量？
我应该使用他们提供的.min文件，然后再缩小每件事吗？(通过这种方式，我节省了很多磁盘)
有更好的方法吗？自动加载缩小的文件是很好
浏览 0提问于2014-12-05得票数 4
1回答
我们有网站上的反应和做代码分裂使用可下载，和所有webpack优化。有一点是关于我们使用70个npm库的问题，它导致了一个大的供应商块，我们用splitChunks webpack分裂了它。
如果我们有一个页面，它只使用了70个库中的10个，但是webpack同时以供应商反应和供应商所有等的形式加载了所有的库。
有没有办法在路由的基础上拆分节点模块，如果一个页面使用10个库，我们只加载10个库，而不是一次加载整个node_modules .
例如，我们有三个页面主页，产品列表页面，产品详细页面。
在包json中，我们安装了10个libraies示例
"react-collapsible
浏览 4提问于2021-06-23得票数 3
所以我有一个使用webpack+babel+react加载器的项目。它对另一个同样使用webpack+babel加载器的项目有一个本地依赖。
有没有可能将webpack配置为让它的依赖项运行webpack，然后才考虑到依赖项的结果运行它自己的依赖项？
浏览 0提问于2015-11-27得票数 1
1回答
我正在尝试创建我的ReactJS项目，但是我正在为一些基础知识而奋斗。我有一个/dist/文件夹，其中有我的index.html文件，以及bundle.js的位置和运行应用程序所需的其他任何东西(在我的例子中，是一个图像)。
这是我当前的文件夹结构：(完整代码；)
下面是我的webpack.config.js文件。
我找不到index.html文件是如何加载的，以及为什么我有它。它位于/dist/文件夹中。当我在本地运行应用程序时，react是如何知道从这里加载索引文件的？(npm run dev)
const path = require('path');
cons
浏览 0提问于2018-03-03得票数 1
回答已采纳
在第一次加载时，我的页面加载正常，当我运行应用程序或我直接将url作为本地主机:8080in导航我到初始路线本地主机:8080/主页，但只要我重新加载页面或它自动重新加载页面可以重新加载与特定的定义网址，如本地主机:8080/家庭或本地主机:8080/设置和错误失败，无法获得/Home。
我正在RN中使用react-native-web。以下是导航文件的代码：
import 'react-native-gesture-handler';
import * as React from 'react';
import {NavigationContaine
浏览 26提问于2021-06-05得票数 0
2回答
我有一个创建-反应-应用程序和类型记录的应用程序。这个应用程序是一个oauth2客户机，它需要一个带有https的有效redirect_uri。它还使用websockets。我可以设置一个接受https和wss连接的nginx服务器，并将它们转发给我的开发机器。
这就是它的工作方式：
web浏览器-> https和wss请求-> nginx -> ssh隧道(远程转发)->开发机器->本地webpack和本地应用服务器
Nginx将所有https请求映射到localhost:3000，将所有wss请求(在/api下的任何请求)映射到localhost:9091。这
浏览 9提问于2020-01-27得票数 1
1回答
给定以下场景，如何在项目中使用React/Preact组件：
主/头内容使用Django (或静态html)模板生成
我想要使用React生成侧边栏和页脚组件，这取决于它所处的页面。
我认为下面的方法是可行的，但我不知道如何按以下方式拆分或加载这些包：
在每个页面上加载React/React dom包
在需要时按需加载特定于页面的包
我如何使用webpack捆绑单个组件，以便在静态html页面中使用，并在需要时显示它们？我该如何配置webpack呢？
浏览 2提问于2017-01-26得票数 2
基本上我不能使用本地图像，我真的不确定为什么。我已经安装了url-loader和文件加载器，并尝试请求文件。 HeaderNavigation.js (我尝试使用的图像与品牌图像位于同一目录中，并被引用为品牌图像)。 /**
* Created by Hewlbern on 17-Jan-17.
*/
import React from 'react';
import { LinkContainer } from 'react-router-bootstrap';
import { Nav, Navbar, NavDropdown, MenuItem, N
浏览 83提问于2017-02-08得票数 4
回答已采纳
我已经看过了所有关于将react应用程序部署到github页面的文档，但是没有一个是有效的或者是不适用的。当涉及到Webpack时，这让我非常恼火，但我正试图在这里掌握Webpack。
因此，我最初并没有为我的项目创建dist文件夹。
然后我学会了，你必须把你的文件放在一个dist文件夹里，然后推送到gh-pages。好吧，在我的Github库中，我没有像Github文档所说的那样选择。我唯一的选择是master和/docs。
这是一个带有Redux和Webpack 2的React 15应用程序。
我在这里得到了一个空白浏览器：
加载bundle.js和style.css的资源失败，我不知道为
浏览 1提问于2018-09-21得票数 0
我的团队正在研究一个React本机项目，一些成员最近在应用程序中实现了React.lazy()，目的是使移动应用程序更具性能(在应用程序加载了之后，更快地加载页面)。由于延迟加载的目的只是为了增加启动时间，您认为他们的方法正确吗？我还相信，由于React.lazy()在幕后使用Webpack，而且不支持Webpack，因此，延迟加载将无法工作。有人能确认一下吗？
浏览 3提问于2022-05-24得票数 0
1回答
因此，我用python/django编写了一个用于后端的小项目，并对前端进行了响应。我遵循了以下教程：
我想为项目的徽标显示一个图像，webpack的构建是成功的，但是当我看到页面时，该图像无法加载，我想这是因为图像的编译后的URL无法从django的url中解析，而且访问url只是加载相同的索引页.
此时，我不知道如何修复它，但如果有人能向我介绍如何做到这一点的示例代码，如何在react + django项目中加载映像，我将非常感激。
编辑
项目结构
project
|- api
| |- models.py
| |- serializers.py
| |- views.py
|- a
浏览 1提问于2018-01-13得票数 11
回答已采纳
2回答
我正尝试在React.js应用程序中加载图像，但无法加载它们。我看过一堆SO问题，但没有一个能解决它。在我的webpack.config.js文件中的模块和规则下，我有一个url加载器。 {
test: /\.(jpg|png)$/,
use: {
loader: 'url-loader',
},
} 然后在我的App.js文件中，我有这个。 import React from "react";
import '../css/App.css'
import locationImg from '../p
浏览 24提问于2020-11-16得票数 1
1回答
我正在创建一个React应用程序，我的主要依赖项是React、react-dom、Redux、Immutable和其他一些小型库。问题是，当我使用webpack构建应用程序时，它会加载一些额外的模块，比如lodash和jQuery，因为它们是嵌套依赖项，这会导致我的构建太大(用WebpackBundleSizeAnalyzerPlugin检查)。但是，例如，如果我只使用react-dom的render函数，为什么我需要额外加载完整的lodash模块？有没有可能强制webpack只加载嵌套依赖模块的必要部分，而不是完整的？谢谢
浏览 10提问于2017-06-28得票数 1
我正在尝试通过文件加载器或url加载器在我的React应用程序中使用webpack显示图像。但到目前为止，我只看到了文件名，没有看到图像。 下面是我的webpack.config.js的相关部分： ...
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: 'file-loader'
}
]
},
... 下面是我的.jsx模块顶部的导入： import MyImage from '../../../assets/images/library.
浏览 13提问于2020-01-18得票数 0
我想添加一个图片到我的反应网站本地。所以，我做了<img src={require('./wally.jpg')} />，但它似乎不起作用。然后，我在PNG <img src={require('./wally.png')} />上尝试了同样的方法，结果成功了。因此，问题是，我不能添加JPG图像的反应网站。为什么JPG不呈现？
我试过：
在呈现之前导入图像。
使用<img src={require('image url')} />
安装url-加载程序和文件加载程序。
使用css上传图像
浏览 0提问于2018-12-30得票数 0
存储库中的U P D A T E D固定代码
首先，我知道有一些关于这个话题的帖子，但是它们太过时了(webpack 1或2)
我正在尝试设置一个webpack配置，以响应图像，避免丑陋的var myImage = require('./imagePath/image.jpg');
只有当我通过scss或css (背景图像)添加图像时，它才能工作，但如果我试图在index.html或react组件中添加图像，则不会生成图像。
我正在尝试使用文件加载器、html加载器和
我用样例创建了。
您可以克隆它，只需通过npm install或yarn install安装依赖项。
在过
浏览 4提问于2017-08-01得票数 1
回答已采纳
我正在构建一个使用TypeScript和Webpack 4的React应用程序。我试图从react-select导入一个CSS文件，但我得到了一个通用错误：
ERROR in ./node_modules/react-select/dist/react-select.css
Module parse failed: Unexpected token (8:0)
You may need an appropriate loader to handle this file type.
| * MIT License: https://github.com/JedWatson/react-sele
浏览 15提问于2018-03-03得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
