reactjs - Import a dynamic file in render() method

Question

I've got a question about importing a dynamic file path in reactjs. I already know, that I can import a file / image like this:

import pdfImage from '../images/pdf.svg';

Now I wanto to import a file from an object given from the props. I have relative file path in my object saved i.e.

documents/1_1_DEU_DE.pdf

The issue is, that on build, the path to the file looks like this i.e. of the pdf image above.

/static/media/pdf.3fa92281.svg

so I'm searching for something similar to this:

render() {
    import pdfFile from '../' + this.props.termsAndCondition.pdfDocument;
    return (
        <li>
            <a href={pdfFile} target="_blank">
                <img src={pdfImage}></img> 
                {this.props.termsAndCondition.language}
            </a>
        </li>
    );
}

Of course, I know, I can put the files instead of the src folder to the public folder, but is this recommended? I'm sure there is a solution to my problem, but all my researches did not get an answer to me. Thanks in advance.

Since it’s a static file you may be could put an absolute path including domain http://... — boateng
– boateng, Commented Aug 27, 2018 at 15:20

dns_nx · Accepted Answer · 2018-08-27 16:02:39Z

2

I've got the answer. I can use require to import files dynamically.

render() {
   let pdfFile = require('../' + this.props.termsAndCondition.pdfDocument);
   return (
      <li>
         <a href={pdfFile} target="_blank" className="link">
            <img src={pdfImage} className="phoneMain"></img> 
            {this.props.termsAndCondition.language}
         </a>
      </li>
   );
}

answered Aug 27, 2018 at 16:02

dns_nx

3,9556 gold badges47 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

reactjs - Import a dynamic file in render() method

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related