无法在我的React组件中加载图像

Question

Not sure what I'm doing wrong, but this image shows up broken when I render the page.

Project Directory Structure is:

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);
});

When the page renders, I get a broken image. I assume you should be able to load images like normal with and I've tried to troubleshoot the image path with no luck.

Answer 1

From your code you are serving static files from client folder.

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

So your path localhost:3000/ext/assets/logo.png is failing. Hopefully you will get the same error when you try to load the above url from your browser.

You may need to move the ext folder inside client folder.

The better approach is to use Webpack. https://www.codementor.io/reactjs/tutorial/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack

Answer 2

It looks like your server root is /src and is not serving the ext directory. Your have to use the ext directory in your express server config

var path = require('path');
app.use('/ext', express.static(path.resolve(__dirname, '../ext')));