我正在构建一个小的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。
以下是对我有效的方法。首先，让我们了解这个问题。不能使用变量作为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标签。
编码快乐!
