我正在构建一个小的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');
});
我开始用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...
我也想补充一下@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。
我将分享我在一个创建-反应-应用程序项目中工作的解决方案:
在同一个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标签。
编码快乐!
我是这样解决的。
所以我只有在映射多个图像的数组时才会遇到这个问题。通常使用import import artist3 from './../../ assets/images/cards_images/artists/artist3.png';它工作得很好，但问题是当循环多个图像形成一个数组。
我分享的是我用来解决这个问题的方法。
以前-----我使用imageurl: 'your_image_url.png'
------在我的数组中，我将imageurl: require('your_image_url。png')
const artists = [
{firstname: 'Trevor', lastname: 'Bowman', imageurl: require('./../../assets/images/cards_images/artists/artist1.png') },
{firstname: 'Julia', lastname: 'Deakin', imageurl: require('./../../assets/images/cards_images/artists/artist2.png') },
{firstname: 'Stewart', lastname: 'Jones', imageurl: require('./../../assets/images/cards_images/artists/artist3.png') },
{firstname: 'Arsene', lastname: 'Lupin', imageurl: require('./../../assets/images/cards_images/artists/artist1.png') },
]
现在，在另一个组件中，我使用这些数据来循环我绑定到image src的艺术家，如下所示
<img src={artist.imageurl.default} className="artists__content——image br-08" alt={'img'+index} />
因为当你输入require()时，你得到的是Module对象，它有一个默认属性，它有我们的url(截图附在下面)
所以。default这个东西是在require()之后访问url的一个额外的东西
