我正在构建一个小的react应用程序,我的本地图像不会加载。图像就像占位符。它/ 200 x200型负载。我想可能是服务器的问题?

这是我的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;

index.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');
});

当前回答

以下是对我有效的方法。首先,让我们了解这个问题。不能使用变量作为require的参数。Webpack需要知道在编译时要捆绑什么文件。

When I got the error, I thought it may be related to path issue as in absolute vs relative. So I passed a hard-coded value to require like below: <img src={require("../assets/images/photosnap.svg")} alt="" />. It was working fine. But in my case the value is a variable coming from props. I tried to pass a string literal variable as some suggested. It did not work. Also I tried to define a local method using switch case for all 10 values (I knew it was not best solution, but I just wanted it to work somehow). That too did not work. Then I came to know that we can NOT pass variable to the require.

作为一种解决方法,我已经修改了数据中的数据。Json文件来限制它只是我的图像的名字。这个图像名称是来自于道具的字符串文字。我将它连接到硬编码的值,如下所示:

import React from "react";

function JobCard(props) {  

  const { logo } = props;
  
  return (
      <div className="jobCards">
          <img src={require(`../assets/images/${logo}`)} alt="" /> 
      </div>
    )
} 
  

标识中包含的实际值将来自数据。Json文件,会引用一些图像名称,比如photosnap。svg。

其他回答

我将分享我在一个创建-反应-应用程序项目中工作的解决方案:

在同一个images文件夹中包含一个js文件,导出所有的图像,在组件中,你需要的图像导入图像并使用它:),Yaaah就是它,让我们详细看看

文件夹结构与JS文件

// js file in images folder
export const missing = require('./missingposters.png');
export const poster1 = require('./poster1.jpg');
export const poster2 = require('./poster2.jpg');
export const poster3 = require('./poster3.jpg');
export const poster4 = require('./poster4.jpg');

你可以在你的组件中导入: import {missing, poster1, poster2, poster3, poster4} from '../../assets/indexImages';

你现在可以使用这个作为SRC to image标签。

编码快乐!

以下是我的做法: 如果你使用npx create-react-app来设置你的react,你需要从你想要使用它的组件的文件夹中导入图像。这只是从它们的文件夹导入其他模块的方法。

所以,你需要写:

import myImage from './imageFolder/imageName'

然后在JSX中,您可以有这样的内容:<image src = {myImage} />

请看下面的截图:

它已经为我解决了,只需从公共图像的路径中删除“点”。

我正在开发一个使用SSR的项目,现在我想在这里分享我的解决方案。

我的目标是预加载图像显示它时,互联网连接离线。(这可能不是最好的做法,但因为它对我有用,现在还可以) 供参考,我在这个项目中也使用ReactHooks。

  useEffect(() => {
    // preload image for offline network
    const ErrorFailedImg = require('../../../../assets/images/error-review-failed.jpg');
    if (typeof window !== 'undefined') {
      new Image().src = ErrorFailedImg;
    }
  }, []);

为了使用图像,我这样写

<img src="/assets/images/error-review-failed.jpg" />

哦,是的,几分钟前我也遇到了同样的问题,这对我来说很有效:

import React from "react" import logo from "../images/logo.png"

export default function Navbar() {
    return(
        <nav>
            {/* <img className="nav--logo" src="../images/logo.png"/> */}
            <img className="nav--logo" src={logo} alt="logo"/>
        </nav>
    ) }