Question

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

＆LT; --------------------------------------------- ---------------------------------＆GT;

     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对象可能不兼容。有什么建议吗？

Answer 1

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

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

images文件夹的完整路径应为

PROJECT_NAME/public/assets/images

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

Answer 2

您可以使用该方法显示图像。我希望代码是有用的

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:output method="xml" indent="yes" />

<xsl:template match="csv">
    <div type="bamboopower">
        <xsl:apply-templates select="//row"/>
    </div>
</xsl:template>

<xsl:template match="row">
    <bamboo id="{id}">
        <xsl:if test="more">
            <xsl:attribute name="more">
                <xsl:value-of select="more" />
            </xsl:attribute>
        </xsl:if>
        <p><xsl:value-of select="stuff"/></p>
    </bamboo>
</xsl:template>
</xsl:stylesheet>

Answer 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>

媒体对象不呈现图像

3 个答案: