title: How to add image in Navbar in react-materialize?
body: <p>I have the following code in ReactJS where I am using react-materialize for UI.</p>
  
  <pre><code>import {Logo} from './logo.png';
  &lt;Navbar brand='logo' right&gt;
   &lt;NavItem href='get-started.html'&gt;Getting started&lt;/NavItem&gt;
   &lt;NavItem href='components.html'&gt;Components&lt;/NavItem&gt;
  &lt;/Navbar&gt;
  </code></pre>
  
  <p>How do I replace brand with an image? I tried the following:</p>
  
  <ul>
  <li>brand={Logo}</li>
  <li>src={Logo}</li>
  </ul>
  
  <p>But it doesn't work. Is there a solution for this?</p>
  
  <p><strong>Solved:</strong></p>
  
  <p>Declare a variable with the HTML div as follows:</p>
  
  <pre><code>var Img = &lt;img src={ImportedImage}/&gt;
  </code></pre>
  
  <p>and further assign it to brand on the Navbar as follows:</p>
  
  <pre><code>&lt;Navbar brand={Img} ...../&gt;
  </code></pre>
  
  <p>The reason that <code>brand={Logo}</code> didn't work is that it wasn't an HTML image form and hence showed a random text on the web browser.</p>