媒体对象不渲染图像答案

【问题标题】：Media Object doesn't render images媒体对象不渲染图像
【发布时间】：2018-11-21 19:54:43
【问题描述】：

    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;

我是新手，我尝试过构建一个简单的应用程序。另外，我在其中使用了 reactstrap。但它没有显示我放在 public/assets/images 文件夹中的图像。有人可以帮助我吗？我已经尝试了很多次，可能媒体对象可能不兼容。有什么建议吗？

【问题讨论】：

嗨，您是否使用 create-react-app 来启动您的项目？
我使用了 npx create-react-app my-app
我在下面给出了一个答案，基于让您的代码工作并显示一些图像，让我知道您的进展情况。罗伯
okkkk 我一定会让你知道的

标签： reactjs ecmascript-6 reactstrap

【解决方案1】：

确保在公用文件夹中创建了assets文件夹，并在assets文件夹中创建了images文件夹并将图像文件放在那里。

然后您应该会在开发服务器上看到图像。

图片文件夹的完整路径应该是

PROJECT_NAME/public/assets/images

其中 PROJECT_NAME 是您为 create-react-app 指定的名称，即。我的应用

【讨论】：

【解决方案2】：

你可以使用显示图片的方法，希望代码有用

<img key={i} src={ require(`../../assets/${image}`) } />

【讨论】：

【解决方案3】：

我遇到了同样的问题。为了渲染图像，您已经指定了图像的大小。

所以不仅仅是：

<Media left middle>
      <Media object src={dish.image} alt={dish.name} />
</Media>

试试这个：

var imgStyle = {
   minWidth: "40px",
};

<Media left middle>
      <Media style={imgStyle} object src={dish.image} alt={dish.name} />
</Media>

【讨论】：