React中使用动态链接添加图片

Question

我用create-react-app创建了一个React应用程序，其中有一个需要多次重复使用的组件。该组件包含标签，每个实例的图像都不同。我将图片路径作为imagePath属性从父组件传递给子组件，然后该子组件需要从该路径加载图片。

import image from imagePath

因为我不知道组件构建后的路径，而且导入语句在组件主体内不起作用。

我尝试使用<img src={imagePath}>也不起作用，你能指点我正确的方向吗？

为了进一步澄清，添加代码。 第一种方法行不通。内容是由父级传递的对象，content.image具有值./images/keeper.PNG。

    import React from 'react'; 
import image from './images/keeper.PNG'

    export default function Project(props)

    {

        return <div className='projectContainer'  >
            <div className='projectImage'>
                <img src={props.content.image}
            alt ='' />
            </div>
            <div className='.projectDescription'>
                <h4>{props.content.name}</h4>
                <p>{props.content.intro}</p>
                <h5>Technologies and problems</h5>
                <p>{props.content.tech}
                </p>
            </div>
        </div> }

第二种方法是这样的：<img src={image} alt ='' />它可以正常工作并显示图像，但正如上述所述，我在创建组件之前不知道图像路径。

- user12130418

---

请添加更多的代码。 - Gangadhar Gandi

请您添加代码。 - PRADEEP GORULE

不要使用import，而是从父组件中将图像URL作为props发送。这样就可以正常工作了。 - kumaran

@Ramesh 该图像的完整路径。 - user12130418

@PRADIPGORULE 添加了更多代码，请再看一下。 - user12130418

Answer 1

示例

父组件

let image = 'https://www.belightsoft.com/products/imagetricks/img/[e-mail]'

function Parent(){
 return <Child image={image}/>
}

子组件

function Child(props){
 return <img src={props.image} alt="icon-image" />
}

如果您在组件中导入，也可以直接使用：

从'./image.jpg'导入图像路径。

   function Child(props){
     return <img src={imagePath} alt="icon-image" />
    }

- akhtarvahid

---

添加了代码，你能告诉我为什么这个方法对我不起作用吗？ - user12130418

@Lutf 如果您已经导入了图像，则只需将其设置为 src={image}，而不是 src={props.content.image}。 - akhtarvahid

这只是为了展示图像路径是否有效，我需要许多此组件的实例来呈现不同的图像，因此我需要从props获取图像路径。 - user12130418

Answer 2

尝试以这种方式使用它，您可以通过props传递imagePath

<img src={require(`${props.imagePath}`)} />

仅这个就可以完成工作。

使用Webpack时，您需要要求图像以便Webpack处理它们，这就解释了为什么外部图像加载而内部图像不加载，因此，您需要使用img src = {require（'/imagePath'）}替换img src = {"/imagePath"}，将imagePath替换为每个图像的正确名称。这样，Webpack就能够处理和替换源img。

- Tinu Jos K

---

如果您这样做，您将不得不在文件的每个地方都这样做，如果您打算使用相同的图像，这是糟糕的代码质量。 - 0xAnon

@Coderboi，我没听懂你的意思。如果你通过props传递图像URL，那么你如何使用相同的图像？ - Tinu Jos K