我正在构建一个小的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');
});
我也想补充一下@Hawkeye Parker和@Kiszuriwalilibori的回答:
正如这里的文档所指出的，通常最好根据需要导入图像。
然而，我需要动态加载许多文件，这导致我把图像放在公共文件夹(也在README中声明)，因为下面的文档建议:
Normally we recommend importing stylesheets, images, and fonts from JavaScript. The public folder is useful as a workaround for a number of less common cases:
You need a file with a specific name in the build output, such as manifest.webmanifest.
You have thousands of images and need to dynamically reference their paths.
You want to include a small script like pace.js outside of the bundled code.
Some library may be incompatible with Webpack and you have no other option but to include it as a tag.
希望这能帮助到其他人!如果我需要澄清任何问题，请给我留言。
以下是对我有效的方法。首先，让我们了解这个问题。不能使用变量作为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。
我开始用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的主文档链接，其中解释了(摘录):
...You can import a file right in a JavaScript module. This tells Webpack
to include that file in the bundle. Unlike CSS imports, importing a
file gives you a string value. This value is the final path you can
reference in your code, e.g. as the src attribute of an image or the
href of a link to a PDF.
To reduce the number of requests to the server, importing images that
are less than 10,000 bytes returns a data URI instead of a path. This
applies to the following file extensions: bmp, gif, jpg, jpeg, and
png...
