#React Import an image in a component-CodePudding

i'm trying to define my "Logo" as an image. i tried to create a logo.js component, define it as an image and call it here, but i have absolutely no clue on how to solve that.

Here is my banner component,

    import React from 'react'
import Banner from 'react-banner'
import 'react-banner/dist/style.css'
import Logo from '../Logo'

export default props => {
    return (
        <Banner
            Logo = "My logo"
            url={ window.location.pathname }
            items={[
                { "content": "Quoi de neuf au tieks ?", "url": "/wassup" },
                { "content": "Les poucaves du jour", "url": "/lpdc", "children": [
                    { "content": "Océane", "url": "/children/oceane" },
                    { "content": "Mehdi", "url": "/children/mehdi" },
                    { "content": "Yikes", "url": "/children/zemmeled" }
                ]}
            ]} />
    )
}

CodePudding user response：

if I understand well your question is: I can you pass a logo to the Banner Component ?

A quick look to the react-banner documentation and you can find : "logo (node) The image, text, or whatever else you may want to display in the left section of the banner.

url (string)" https://skipjack.github.io/react-banner/customization

So I believe you can do as follow:

    import React from 'react'
import Banner from 'react-banner'
import 'react-banner/dist/style.css'
import Logo from '../Logo'

export default props => {
    return (
        <Banner
            Logo = "My logo"
            logo=<Logo />
            url={ window.location.pathname }
            items={[
                { "content": "Quoi de neuf au tieks ?", "url": "/wassup" },
                { "content": "Les poucaves du jour", "url": "/lpdc", "children": [
                    { "content": "Océane", "url": "/children/oceane" },
                    { "content": "Mehdi", "url": "/children/mehdi" },
                    { "content": "Yikes", "url": "/children/zemmeled" }
                ]}
            ]} />
    )
}

As you can see on the code above, I pass the Logo component into the props logo of the BannerComponent from the librairy react-banner.