Невозможно загрузить изображение внутри моего компонента React

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. Your должен использовать каталог внутра в вашей экспресс-конфигурации сервера

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