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 - 地图功能 - 求助

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} />

希望能有效。

ReactJS- image src调用另一个文件夹错误

1 个答案: