How to use require() with variable names in react?

Question

I have read many solutions on stack overflow and blogs but none could solve my problem. I have image urls from api. It is uncommon but it is an assignment to me

   productsdata= {
        id: 12,
        title: "Cat Tee Black T-Shirt",
        description: "4 MSL",
        availableSizes: ["S", "XS"],
        style: "Black with custom print",
        price: 10.9,
        installments: 9,
        currencyId: "USD",
        currencyFormat: "$",
        isFreeShipping: true,
        src_1: "../../assets/113_1.jpg",
        src_2: "../../assets/113_2.jpg"
      },

here I am displaying image as

{productsdata.map(product => {
        return (
          <>
            <img src={product.src_1} width="200" height="200" alt="tshirt" />
            {/* <img src={product.src_2} width="200" height="200" /> */}
          </>
        );
      })}

but it doesn't work as require() only works with static url. Could someone pls help me?

Please post your ReactJS code that generates the <img /> element. — Dai
– Dai, Commented Feb 7, 2020 at 10:04
<img src ={src1} /> Use Curly Braces if you have the api response in the jsx — Gowri Pranith Kumar
– Gowri Pranith Kumar, Commented Feb 7, 2020 at 10:04
How does img path from API can be a relative path? Seems strange. — thanhdx
– thanhdx, Commented Feb 7, 2020 at 10:04
Ask them to fix their API response as it makes no sense to send relative URLs in response. — UtkarshPramodGupta
– UtkarshPramodGupta, Commented Feb 7, 2020 at 10:05

Prakash Reddy Potlapadu · Accepted Answer · 2020-02-10 18:53:39Z

3

I changed the image urls as

 productsdata= {

        src_1: "113_1.jpg",
        src_2: "113_2.jpg"
      },

and changed the 'src' attribute as

 <img src={require(`../../assets/${product.src_1}`)} width="200" height="200" alt="tshirt" />

It worked fine. Here also 'require' is using variable and dynamic url. Who on the earth would think of writing this way. I think it's a bug in javascript or I don't have enough understanding:p

answered Feb 10, 2020 at 18:53

Prakash Reddy Potlapadu

1,0111 gold badge9 silver badges16 bronze badges

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

Comments

Avinash Kumar · Accepted Answer · 2020-02-07 10:15:53Z

-1

you should use like this-

import React, {useState} from 'react';
    import Products from './old';
 const New = (props) =>{
    
    return(
        <div>
       {Products.map((Product, i)=>(
         Object.values(Product).map((prod, i) => (
            <div key={i}>
                <p>id: {prod.id}</p>
                <p>category: {prod.category}</p>
                <p>filename: {prod.filename}</p>
                <p>name: {prod.name}</p>
                <p>price: {prod.price}</p>
            </div>
          )) 
       )

       )}
        </div>
    );
}
export default New;

answered Feb 7, 2020 at 10:15

Avinash Kumar

193 bronze badges

4 Comments

Avinash Kumar Over a year ago

where old.js file will look like this==========> const Products = [ { "867850": { "id": "867850", "category": "Clothes", "filename": "purse", "name": "Purse", "price": 45.48 }}]; export default Products;

Prakash Reddy Potlapadu Over a year ago

I did not get it. How could this solve my problem with rendering image

Avinash Kumar Over a year ago

Use var Products = require('./old') ; and change Products.map to => Products.default.map

Prakash Reddy Potlapadu Over a year ago

Thanks for your concern but I did not understand what you were saying

Collectives™ on Stack Overflow

How to use require() with variable names in react?

2 Answers 2

Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Linked

Related