如何在反应中通过道具导入图像并使用“导入”路径[重复]

Posted 2023-02-21

【中文标题】如何在反应中通过道具导入图像并使用“导入”路径[重复]

【英文标题】：how to import images via props in react and use the 'import' path [duplicate]

【发布时间】：2018-03-07 03:08:43

【问题描述】：

我将以下内容作为道具传递。

const people=['Eliana','Stefania','Ahmed']


  people.map(function(name, index)
    return <Person item=index name=name/>;
  )

import Eliana from '../assets/imgs/people/eliana.png'
import Stefania from '../assets/imgs/people/stefania.png'
import Ahmed from '../assets/imgs/people/ahmed.png'

export default class Person extends React.Component 
  render() 
    return (
      <div>
        <img src=this.props.name alt=''/>
	    <li key=this.props.item>this.props.name</li>
	  </div>
    );
  

我在这里所做的是使用数组中的上述字符串传递给组件，然后使用相应的路径从该组件生成图像，但是当我传递道具时，它们显示为字符串，就像 Eliana 一样在 img src 中按原样显示？

我如何获得相应的路径？可能是某种字符串转换？ 我敢打赌，这很容易！

【问题讨论】：

将li 包装在div 中是无效的html。 li 应该是 ul 或 ol 的直接子代。

这不是问题所在。另外，我只是在测试一些东西，甚至不需要那里。

我知道，这就是我将其作为评论留下的原因 :) 只是想提供帮助。

【参考方案1】：

轻松解决您的问题

<img src=require(this.props.name) alt=''/>

但这意味着您拥有完整的路径。你目前拥有的东西看起来不像会起作用。无论如何，当 React 解释你的代码时，每个都必须以一个路径名结尾，就像这样：

<img src=require('../assets/imgs/people/ahmed.png') alt=''/>

一个简单的解决方法是将路径作为字符串添加到您的this.props.name 之前。它是标准化的，因此您只需添加名称，如下所示：

<img src=require(`../assets/imgs/people/$this.props.name.toLowerCase().png`)/>

请务必记录这一点。你一定要记录下来。

【讨论】：

× 错误：找不到模块“。” webpackMissingModule C:/development/hybrid/src/components/person.js:23 是的，如果我将它直接传递给 img src，它是一个 rel 路径，我不太确定如何在这里传递 abs 路径。从 ./ 开始，根目录应该是 localhost 对吧？

默认行为是相对路径，而不是绝对路径，如果这是您的问题。因为您的图像路径非常标准化，所以您始终可以只进行字符串插值。让我更新我的答案。

感谢您的帮助！投票赞成，可能需要一段时间才能更新:)

另一个问题，如果你有一个分钟，为什么 this.props.name 变成了一个名字？我的意思是，虽然这个解决方案有效，但我想知道我们如何将该字符串转换/解析为导入文件的值？

如果这是您的问题，您根本没有使用这 3 个导入的图像。如果您想要完整的解释，我必须以另一个问题的形式向您展示这一点，但基本的纲要是您必须将这些图像放在您的父母中并制作这些图像的数组，而不是字符串数组，只有他们的名字。

【参考方案2】：

您可以使用连接整个 URL除了名称，然后连接 name 属性。

<img src=require('../assets/imgs/people/' + this.props.name + '.png')

【讨论】：

试过了，抛出一个 webpack 错误，我试图用 'require' 语法做的任何事情都会抛出一个 webpack 错误。我已经建立了一个基本的 CRNA

不，Gage 的解决方案引发错误的唯一原因是图像文件名都是小写的，而您的 this.props.name 字符串是大写的。

@Andrew 不错！您可以在 people 数组内将其小写，也可以通过 this.props.name.toLowerCase()

在路径字符串本身中小写

@GageHendyYaBoy 是的。在我的解决方案中也看到了同样的可能问题。我们的基本一样。我只是使用了字符串插值，而你使用了连接。

好的，谢谢！这有帮助！