Ранее я рендерил изображение с гугл-диска, теперь мне нужно отрендерить его по локальному пути.Как я могу рендерить изображения в переменной const в Reactjs?

Question

 render() {
    const file1 = {
      "name": "xxxxx",
       "img" : "https://drive.google.com/thumbnail?id=1zeBeWS26cF" 
 //**"previously I calling the image from google drive now I need to 
         render it from local path. how can I do that?"**,
        "details" : "blah blah"
};
         const file2 = {
      "name": "xxxxx",
       "img" : "https://drive.google.com/thumbnail?id=1zeBeWS26cFxxxxxx"    
//**"previously I calling the image from google drive now I need to 
         render it from local path. how can I do that?"**,
        "details" : "blah blah"
};

  return (
      <div className="bio_mainDiv">
        <div className="cards"><BioCard card={file1}/></div> **//So I am not able use <img src="" /> here..**
        <div className="cards"><BioCard card={file2}/></div>
</div>
);
}

Компонент BioCard

class BioCard extends Component {

  handleDetailClick = () => {
    this.props.showDetails(this.props.card);
  };

  render() {
    const currcard = this.props.card;
    const name = currcard.name;
    const details = currcard.desc;
    const img = currcard.img;

    return (
      <div onClick={this.handleDetailClick}>
        <div className="biocard_main">
          <img className="biocard_img" src={img} alt=""/>
          <div className="biocard_name">{name}</div>
          <div className="biocard_details">{details}</div>
        </div>
      </div>
    );
  }
}

BioCard.propTypes = {
  card: PropTypes.object.isRequired
};
export default connect(
  null,
  mapDispatchToProps
)(BioCard);

Ранее я рендерил изображение с Google Drive, оно работало нормально.Теперь мне нужно отрендерить его с локального пути.Как я могу рендерить изображения в переменной const в Reactjs?Я не могу использовать тег img здесь, какие у меня есть варианты.

Answer 1

Импорт модулей с использованием require или импорт модулей с использованием es6

Оператор import используется для импорта привязок, которые экспортируются другим модулем. Импортируемые модули находятся в строгом режиме независимо от того, объявляете ли вы их как таковые или нет. Оператор импорта нельзя использовать во встроенных сценариях.

1. Using Import

import imgPath from '../img' //local path of image in application

render() {
    const file1 = {
        "name": "xxxxx",
        "img": "https://drive.google.com/thumbnail?id=1zeBeWS26cF",
             //**"previously I calling the image from google drive now I need to render it from local path.how can I do that ? "**,
        "details": "blah blah"
    };
    const file2 = {
        "name": "xxxxx",
        "img": imgPath,
        //**"previously I calling the image from google drive now I need to render it from local path.how can I do that ? "**,
        "details": "blah blah"
    };

    return (
        <div className="bio_mainDiv">
            <div className="cards"><BioCard card={file1} /></div> **//So I am not able use <img src="" /> here..**
            <div className="cards"><BioCard card={file2} /></div>
        </div>
    );
}

2. Using require

render() {
    const file1 = {
        "name": "xxxxx",
        "img": "https://drive.google.com/thumbnail?id=1zeBeWS26cF",
        //**"previously I calling the image from google drive now I need to render it from local path.how can I do that ? "**,
        "details": "blah blah"
    };
    const file2 = {
        "name": "xxxxx",
        "img": require('.../img'),
        //**"previously I calling the image from google drive now I need to render it from local path.how can I do that ? "**,
        "details": "blah blah"
    };

    return (
        <div className="bio_mainDiv">
            <div className="cards"><BioCard card={file1} /></div> **//So I am not able use <img src="" /> here..**
            <div className="cards"><BioCard card={file2} /></div>
        </div>
    );
}