This is how it appears
<img className='imgclass' src={"../" + require(aLc.value)} alt='' key={aLc.value} />
I am trying to create a path like ../m/b/image.jpg, where aLc.value contains the path /m/b/image.jpg. I need to add only .. before the folder path, but it is not working. I attempted to do it as shown in the example above, but it gives me the error message:
Error: Cannot find module '/m/b/image.jpg'<img className='imgclass' src={require(".." + aLc.value)} alt='' key={aLc.value} />
However, this results in an error saying: Error: Cannot find module "."
How can I resolve this issue?
@edit - Resolved with Map function
const ProductsList = ({ data: {loading, error, allLinks }}) => {
if (loading) {
return <p>Loading ...</p>;
}
if (error) {
return <p>{error.message}</p>;
}
return (
<div className="productList">
<div className="container">
<div className="row">
{
allLinks.items.map( aL =>
<div key={aL.id} className="product">
{
aL.custom_attributes.map( aLc =>
aLc.__typename === 'CustomString' && aLc.attribute_code === 'image'
? <img className='imgclass' src={require(`../components${aLc.value}`} alt='' key={aLc.value} /> //without subordinate folder 'components' react auto delete one of dots e.g (require(`..${aLc.value}`) => Error: Cannot find module '.' because react deleted one dot.
: aLc.__typename === 'CustomString' && aLc.attribute_code === 'description'
? <div key={aL.id}>{aLc.value}</div>
: aLc.__typename === 'CustomArray'
? aLc.aliasVar.map( aV => <div key={aV}>{aV}</div>)
: null
)
}
</div> )
}
</div>
</div>
</div>
);
};
allLinks represents the type name of the API. All values are present in the API.