javascript - ReactJS-图像src调用另一个文件夹错误

Question

这是它的样子

<img className='imgclass' src={"../" + require(aLc.value)} alt='' key={aLc.value} />

我需要制作类似../m/b/image.jpg 的路径，而aLc.value 包含路径/m/b/image。 jpg 所以我只需要在路径文件夹前添加 .. ，但它不起作用。我试着像上面的例子那样做，但它给了我错误 Error: Cannot find module '/m/b/image.jpg'。我试着做

<img className='imgclass' src={require(".." + aLc.value)} alt='' key={aLc.value} />

但这给了我错误Error: Cannot find module "."

我该如何解决？

@edit - map 功能 - 已解决

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 是api的类型名。所有值都存在于 api 中。

Answer 1

你可以简单地写:

<img className='imgclass' src={`../${aLc.value}`} alt='' key={aLc.value} />

希望它能奏效。