javascript - 以前我从谷歌驱动器渲染图像现在我需要从本地路径渲染它。如何在 Reactjs 的 const 变量中渲染图像？

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>
);
}

生物卡组件

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);

以前我从谷歌驱动器渲染图像它工作正常。现在我需要从本地路径渲染它。如何在 Reactjs 的 const 变量中渲染图像？我不能在这里使用 img 标签，我在这里有什么选择。

标签： javascriptreactjscss

Answer 1

使用 require 导入模块或使用 es6 导入模块

import 语句用于导入由另一个模块导出的绑定。无论您是否声明，导入的模块都处于严格模式。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>
    );
}