React 不会加载本地图片

IT技术 javascript reactjs
2021-01-16 15:41:08

我正在构建一个小型 React 应用程序,但我的本地图像无法加载。placehold.it/200x200负载一样的图像我想也许这可能是服务器的问题?

这是我的 App.js

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div className="home-container">
                <div className="home-content">
                    <div className="home-text">
                        <h1>foo</h1>
                    </div>
                    <div className="home-arrow">
                        <p className="arrow-text">
                            Vzdělání
                        </p>
                        <img src={"/images/resto.png"} />
                    </div>
                </div>
            </div>
        );
    }
}

export default App;

索引.js:

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Router, Route, Link } from 'react-router';
import { createHistory } from 'history';
import App from './components/app';

let history = createHistory();

render(
    <Router history={history} >
        <Route path="/" component={App} >
            <Route path="vzdelani" component="" />
            <Route path="znalosti" component="" />
            <Route path="prace" component="" />
            <Route path="kontakt" component="" />
        </Route>
        <Route path="*" component="" />
    </Router>,
    document.getElementById('app')
);

和 server.js:

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config.dev');

var app = express();
var compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.use(require('webpack-hot-middleware')(compiler));

app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'index.html'));
});

app.listen(3000, 'localhost', function(err) {
  if (err) {
    console.log(err);
    return;
  }

  console.log('Listening at http://localhost:3000');
});
6个回答

使用 Webpack 时,您需要require图像以便 Webpack 处理它们,这可以解释为什么外部图像加载而内部图像不加载,因此<img src={"/images/resto.png"} />您不需要使用<img src={require('/images/image-name.png')} />每个图像的正确图像名称替换 image-name.png 。这样 Webpack 就能够处理和替换源 img。

但是如何导入require呢?浏览器?如果是,那么如何?我试过了import {require} from 'browserify'但它不起作用。
2021-03-15 15:41:08
得到一个错误:Module not found: Error: Can't resolve 'MyPNG.png' in 'C:...\app\components\images'文件路径看起来不错!。
2021-03-26 15:41:08
<img src={require("../../../Assets/Flags/united-states-of-america.png")} 对我来说这不起作用。但是如果我把 .defalut 放在最后的图像被加载。<img src={require("../../../Assets/Flags/united-states-of-america.png").default}. 如何在不写入 .default 的情况下加载图像?
2021-03-31 15:41:08
src= {require('./reactLogo.svg')} 以“ ./ ”作为当前目录的开头以避免错误。
2021-04-04 15:41:08
@ShubhamKushwah 您不应该导入require. 它作为 的一部分提供commonjs请参阅stackoverflow.com/a/33251937/4103908viget.com/articles/gulp-browserify-starter-faq了解更多详细信息,可能会帮助您使用 Gulp 使用 require 和 browserify。
2021-04-10 15:41:08

我开始使用create-react-app构建我的应用程序(请参阅“创建新应用程序”选项卡)。它附带的 README.md 给出了这个例子:

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image

console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}

export default Header;

这对我来说非常有效。这是该 README 主文档链接,其中解释了(摘录):

...您可以直接在 JavaScript module中导入文件。这告诉 Webpack 将该文件包含在包中。与 CSS 导入不同,导入文件会为您提供一个字符串值。该值是您可以在代码中引用的最终路径,例如作为图像的 src 属性或指向 PDF 的链接的 href。

为了减少对服务器的请求数量,导入小于 10,000 字节的图像将返回数据 URI 而不是路径。这适用于以下文件扩展名:bmp、gif、jpg、jpeg 和 png...

@V.Courtois 抱歉——从那以后我就没有处理过这些东西,现在我不记得更多细节了:(
2021-03-14 15:41:08
我必须将我的图像添加到 Create-React-App 项目中的公共文件夹中。
2021-03-21 15:41:08
此外,您还必须从某个地方导出图像,以便能够将它们导入到任何地方,而不仅仅是从同一目录中导入,如果它们没有被导出,就会出现这种情况。它们必须与要导入的组件位于同一目录中。您会注意到,例如,对于使用 CRA 创建的任何新 React 应用程序,logo.svg 文件与 App.js 位于同一目录中,在该目录中导入它。我在这里写了一篇关于在 React 中导入图像的文章:blog.hellojs.org/importing-images-in-react-c76f0dfcb552
2021-03-25 15:41:08
我知道这是一个非常古老的话题,但仍然如此;你是怎么做到的?就我而言,程序正在尝试“读取图像”......导致一个可怕的错误:Unexpected character '�' (1:0) > 1 | �PNG | ^ 2 | 3 | 4 | IHDR��r~ipHYs���o�d��IDATx^�}���Ü�d7�w¿½ï¿½ ��JzH!�K�ï......
2021-03-30 15:41:08
为了跟进上面的评论,如果你使用 webpack url-loader 作为上面的 fandro 显示,你匹配 webpack 中测试扩展的文件会自动导出,并使其可用于导入上面显示的 Hawkeye Parker 保存。
2021-04-09 15:41:08

另一种做法:

首先,安装这些module:url-loaderfile-loader

使用 npm: npm install --save-dev url-loader file-loader

接下来,将其添加到您的 Webpack 配置中:

module: {
    loaders: [
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }
    ]
  }

limit:作为数据 URL 的内联文件的字节限制

您需要安装两个module:url-loaderfile-loader

最后,你可以这样做:

<img src={require('./my-path/images/my-image.png')}/>

您可以在此处进一步调查这些加载程序:

url-loader: https://www.npmjs.com/package/url-loader

文件加载器:https : //www.npmjs.com/package/file-loader

它真的很有用,但我无法理解为什么 <img src="images/myimage.png" /> 不起作用!你能解释一下吗?
2021-03-12 15:41:08
希望它可以帮助其他人。我也必须这样做;安装 url-loader。npm install --save-dev url-loader
2021-03-14 15:41:08
我用这个昨晚挣扎,今天上午这篇文章实际上是我的屏幕上:)如果你看到这样Module build failed: SyntaxError: c:/contrivedpath/images/profile.jpg: Unexpected character '�' (1:0),所有你需要做的就是这上面的URL装载机配置添加到您的WebPack配置,NPM安装url-loaderfile-loader会让你功能齐全。我进行了测试以确保,并且文件加载器是必要的。
2021-03-16 15:41:08
做了你说的一切,但没有骰子。Webpack 构建时没有抱怨,我可以看到我的 PNG 图像已移动到输出目录中,但图像未加载到页面上。当我检查代码时,它只是说src=[Object module],当我将鼠标悬停时,它说“无法加载图像”
2021-03-31 15:41:08
@agm1984 我按照上述步骤操作,但仍然收到ERROR in ./src/images/imagename.png Module parse failed: Unexpected character '�' (1:0)消息。有任何想法吗?
2021-04-06 15:41:08

在react中加载本地图像的最佳方法如下

例如,将您的所有图像(或任何资产,如视频、字体)保存在公共文件夹中,如下所示。

在此处输入图片说明

只需写入<img src='/assets/images/Call.svg' />即可从任何react组件访问 Call.svg 图像

注意:将您的资产保存在公共文件夹中可确保您可以从项目的任何位置访问它,只需提供 '/path_to_image' 而不需要像这样的任何路径遍历 '../../'

这就是问题所在。但我想知道为什么我们无法访问其他文件夹中的文件。
2021-03-18 15:41:08
React 自动解析路径:stackoverflow.com/questions/47196800/...
2021-03-24 15:41:08
为这个错误道歉。我是新手,我不知道组件文件应该以大写字母开头。在那之后它起作用了。
2021-03-25 15:41:08
PNG 也可以。SVG 对你有用吗?请对文件名进行拼写检查并确保图像路径正确。
2021-03-28 15:41:08
PNG 图像对此不起作用?因为我正是这样做的,但没有奏效。
2021-04-02 15:41:08

通过做一个简单的导入,你可以在 React 中访问图像

import logo from "../images/logo.png";
<img src={logo}/>

一切都解决了!只是一个简单的修复 =)