Медиа-объект не отображает изображения - PullRequest
Новая
       24

Медиа-объект не отображает изображения

0 голосов
/ 12 июня 2018 
    import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

<------------------------------------------------------------------------------> 

     import React, { Component } from 'react';

    import {Navbar, NavbarBrand} from 'reactstrap';
    import Menu from './components/MenuComponent';
    import './App.css';

    class App extends Component {
      render() {
        return (
          <div>
            <Navbar dark color="primary">
            <div className="container">
            <NavbarBrand href="/">FoodHub Restaurant</NavbarBrand>
            </div>
            </Navbar>
            <Menu />
          </div>
        );
      }
    }

    export default App;
<------------------------------------------------------------------------------>
   import React, { Component } from 'react';
import { Media } from 'reactstrap';

class Menu extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dishes: [
                {
                  id: 0,
                  name:'Uthappizza',
                  image: 'assets/images/uthappizza.png',
                  category: 'mains',
                  label:'Hot',
                  price:'4.99',
                  description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.'                        },
               {
                  id: 1,
                  name:'Zucchipakoda',
                  image: 'assets/images/zucchipakoda.png',
                  category: 'appetizer',
                  label:'',
                  price:'1.99',
                  description:'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce'                        },
               {
                  id: 2,
                  name:'Vadonut',
                  image: 'assets/images/vadonut.png',
                  category: 'appetizer',
                  label:'New',
                  price:'1.99',
                  description:'A quintessential ConFusion experience, is it a vada or is it a donut?'                        },
               {
                  id: 3,
                  name:'ElaiCheese Cake',
                  image: 'assets/images/elaicheesecake.png',
                  category: 'dessert',
                  label:'',
                  price:'2.99',
                  description:'A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms'                        }
               ],
        };
    }

    render() {
        const menu = this.state.dishes.map((dish) => {
            return (
              <div key={dish.id} className="col-12 mt-5">
                <Media tag="li">
                  <Media left middle>
                      <Media object src={dish.image} alt={dish.name} />
                  </Media>
                  <Media body className="ml-5">
                    <Media heading>{dish.name}</Media>
                    <p>{dish.description}</p>
                  </Media>
                </Media>
              </div>
            );
        });

        return (
          <div className="container">
            <div className="row">
              <Media list>
                  {menu}
              </Media>
            </div>
          </div>
        );
    }
}

export default Menu;

Я новичок вреагировать и попытался создать простое приложение.Кроме того, я использовал в нем реакционный ремень.Но не отображаются изображения, которые я положил в папку public / assets / images.Может кто-нибудь, пожалуйста, помогите мне в этом.Я много раз пробовал, может быть, объект Media может быть несовместим. Есть предложения?

Ответы [ 2 ]

0 голосов
/ 12 июня 2018

Вы можете использовать метод для отображения изображений. Надеюсь, код будет полезным 

<img key={i} src={ require(`../../assets/${image}`) } />
0 голосов
/ 12 июня 2018

Убедитесь, что папка ресурсов создана в общей папке, а папка с изображениями создана в папке ресурсов и поместите туда файлы изображений.

Затем вы должны увидеть изображения на сервере dev.

полный путь к папке с изображениями должен быть 

PROJECT_NAME/public/assets/images

, где PROJECT_NAME - это имя, которое вы дали для create-реакции-приложения, т.е.мой-приложение

...