title: How to display an svg image in reactjs
body: <p>I am working on a web application with Nodejs and Reactjs and currently i'm retrieving data from the mongo database and displaying it with react.</p>
  
  <p>Here is some code : </p>
  
  <pre><code>import React, {Component} from 'react';
  import axios from '../../node_modules/axios';
  import {Col,Card} from 'react-bootstrap';
  
  import {BrowserRouter as Router,Link, useRouteMatch} from 'react-router-dom';
  
  const Brand = props =&gt; (
  &lt;Col lg="4" className="d-inline-block"&gt;
    &lt;Link to="/admin/Marques/MarqueDetails/1"&gt;
    &lt;Card className="marque-card" style={{ width: '100%' }}&gt;
        &lt;p&gt;{props.brand.name}&lt;/p&gt;
        &lt;Card.Img className="marque-card" variant="top" src={`../../public/` + 
         props.brand.imgUrl} /&gt;
    &lt;/Card&gt;
    &lt;/Link&gt;
  &lt;/Col&gt;
  )
  
  class cardBrand extends Component {
  
  constructor(props) {
      super(props);
  
      this.state = {brands: []};
    }
    componentDidMount() {
      axios.get('http://localhost:5000/brand/')
        .then(response =&gt; {
          this.setState({ brands: response.data })
        })
        .catch((error) =&gt; {
          console.log(error);
        })
    }
    brandList() {
      return this.state.brands.map(currentBrand =&gt; {
        return &lt;Brand brand={currentBrand} key={currentBrand._id}/&gt;;
      })
    }
  render() {
      return(
        &lt;Col lg="12"&gt;
         { this.brandList() }
         &lt;/Col&gt;
      )
    }
  }
  export default cardBrand;
  </code></pre>
  
  <p>As you can see i have the <code>img/brand</code> folders inside the <code>public</code> folder and the <code>props.brand.imgUrl</code> contains the path and the image name, but unfortunately it's not working on the browser, here is an image :</p>
  
  <p>P.S : i already tried <code>react-svg</code> but nothing happened, maybe because i didn't know how to use it.
  Thank you in advance.</p>