Question

不确定我做错了什么，但是当我渲染页面时，这张图片显示出来了。

项目目录结构是：

root
    src
       client
           components
                myComponent.js
    ext
       assets
           logo.js

myComponent.js

import {Component,Store} from 'reactivate';

const CompanyDetail = Component({
    store: Store('./company'),
    render(){
        return (
            <div className='ft-companyDetail'>
                <div id="header">
                    <div class="panel vertical-space">
                        <img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=1650%C3%97300&w=1650&h=300" />
                    </div>
                    <div id="logo" class="panel vertical-space">
                        <img src="../../ext/assets/logo.png" />
                    </div>
                </div>
            </div>
        )
    }
})

export default CompanyDetail;

server.js

var express = require('express'),
    app = module.exports = express(),
    port = 3000;

app.use(express.static('client'));

app.use(function (req, res, next) {
    res.send('Sorry, Page Not Found');
});

app.listen(port, function () {
    console.log('Ready on port %d', port);
}).on('error', function (err) {
    console.log(err);
});

当页面呈现时，我得到一个破碎的图像。我假设您应该可以像平常一样加载图像，并且我试图在没有运气的情况下对图像路径进行故障排除。

Answer 1

从您的代码中，您将从客户端文件夹中提供静态文件。

image_features.height

所以你的路径localhost：3000 / ext / assets / logo.png失败了。当您尝试从浏览器加载上述URL时，希望您会收到同样的错误。

您可能需要在客户端文件夹中移动ext文件夹。

更好的方法是使用Webpack。 https://www.codementor.io/reactjs/tutorial/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack

Answer 2

看起来您的服务器根目录是var path = require('path'); app.use('/ext', express.static(path.resolve(__dirname, '../ext')));，并且没有为ext目录提供服务。您必须使用快速服务器配置中的ext目录

eval()

无法在React Component中加载图像

2 个答案: