Как отобразить изображение SVG в reactjs - PullRequest
Новая
       24

Как отобразить изображение SVG в reactjs

1 голос
/ 18 февраля 2020

Я работаю над веб-приложением с Nodejs и Reactjs, и в настоящее время я извлекаю данные из базы данных mon go и отображаю их с реакцией.

Вот код: 

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 => (
<Col lg="4" className="d-inline-block">
  <Link to="/admin/Marques/MarqueDetails/1">
  <Card className="marque-card" style={{ width: '100%' }}>
      <p>{props.brand.name}</p>
      <Card.Img className="marque-card" variant="top" src={`../../public/` + 
       props.brand.imgUrl} />
  </Card>
  </Link>
</Col>
)

class cardBrand extends Component {

constructor(props) {
    super(props);

    this.state = {brands: []};
  }
  componentDidMount() {
    axios.get('http://localhost:5000/brand/')
      .then(response => {
        this.setState({ brands: response.data })
      })
      .catch((error) => {
        console.log(error);
      })
  }
  brandList() {
    return this.state.brands.map(currentBrand => {
      return <Brand brand={currentBrand} key={currentBrand._id}/>;
    })
  }
render() {
    return(
      <Col lg="12">
       { this.brandList() }
       </Col>
    )
  }
}
export default cardBrand;

Как вы видите, у меня есть папки img/brand внутри папки public, а props.brand.imgUrl содержит путь и имя изображения, но, к сожалению, он не работает в браузере, вот image:

PS: я уже попробовал react-svg, но ничего не произошло, может быть, потому что я не знал, как его использовать. Заранее спасибо.

1 Ответ

1 голос
/ 18 февраля 2020

На скриншоте выглядит, как ваш путь SVG img/brand/svg-name.svg. для отображения изображения не включайте publi c в ваш источник. например, для отображения изображений в public/img/brand вы используете 

// without specifying public directory
<img alt="test" src={'/img/brand/svg-name.svg'}/>

Измените свою карту sr c на 

<Card.Img className="marque-card" variant="top" src={`/${props.brand.imgUrl}`} />
...