React Component内の画像を読み込めません

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

コードからは、クライアントフォルダから静的ファイルを提供しています。

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

あなたのパス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

サーバーのルートが/srcで、extディレクトリを提供していないようです。 はあなたのあなたの特急サーバ設定

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