相关疑难解决方法(0)

我有一个图像 uri，我想将其作为 prop 传递，以便在渲染组件时加载它。因为我将更改图像，所以我不能有静态 uri。但我一直收到这个错误

Error: Cannot find module "."

尽管当我静态加载图像时它确实有效。另外我需要使用 img 元素而不是 Image。

require('./cube.jpg')

这是我的代码

这是我的父类声明组件：

<InputSection ref="inputS" ImD={this.getData} imageUri={this.state.imageurl} />

imageurl 状态定义为：

imageurl: './cube.jpg',

子组件：

return(
<div style={style}>

<br/>

<img  ref="image" src={require(this.props.imageUri)} onLoad={this._onImageChanged.bind(this)} />
<canvas style={{display:'none'}}width={300} height={300} ref="inputCanvas" >

</canvas>
</div>
);

我已经创建了 react app。在我的演示应用程序中，我管理产品并且每个产品都有一个关联的图像。

如何导入我将要展示的那些产品的图像？

例如，我不能做

import cat from './images/cat1.jpg'
import cat2 from './images/cat2.svg'
...
<img src={cat}/>

因为这意味着即使我不显示它们，我也必须导入所有图像。

如何动态导入我需要的那些？

附：我发现了相关的问题，但他们的功能在我这边没有显示，也许是因为我有 create-react-app？

我的项目中有一个图像文件夹create-react-app，里面有一堆图像。我想显示组件中的每个图像。

??? Components
?   ??? Icons
?   ?   ??? Icon.jsx (I want to display every single icon)
?  
?  
??? Images
?   ??? Icons
?   ?   ??? ... (over 100 SVG icons)

在我的 .jsx 文件中，我想遍历每个图像/图标并显示它。

Icons.jsx

import React, { Component } from 'react';
import Icons from '../../Images/Icons';


class Icons extends Component {
  render() {
    return (
      //Loop over every icon and display it
    );
  }
}

我将以下作为道具传递给我.

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？

我如何获得相应的路径？某种字符串转换可能吗？我打赌这是一个简单的!

我试图显示一系列图片,但以下代码不会替换{i}实际数字.它呈现:

<div>
  <img src='/img/picture{i}.jpg' />
  <img src='/img/picture{i}.jpg' />
</div>

这是代码.

class Pictures extends Component {
  render () {

    return (
      <div>
        {Array.from({length: 2}, (_, i) => (
          <img src='/img/picture{i}.jpg' />
        ))}
      </div>
    )
  }
}