Question

我想在React（create-react-app）上的函数中动态显示导入的图像。

代码：

import React, { Component } from 'react';
import reactImg from './img/react.png';

export default class MyPage extends Component {

  renderImage(imageName) {
    return (
      <img src={imageName.toLowerCase()+'Img'} alt={techName} />
    );
  }

  render() {
    return (
      <p>
        {this.renderImage("React")}
      </p>
    )
  }
};

此渲染：<img src="reactImg" alt="React" />

而不是我想要的：<img src="./img/react.png" alt="React" />

如何在函数中动态显示导入的图像？

Answer 1

不确定它是否正在寻找，但是你去了：

renderImage(imageName) {
  return (
    <img src={imageName.toLowerCase()+'Img'} alt={techName} />
              ^^^^^^^^^                ^^^
    // thats wrong concatenation bc your image path looks different
  );
}

试试这个而不是你的：

<img src={`./img/${imageName.toLowerCase()}.png`} alt={imageName} />

Answer 2

import reactImg from './img/react.png';
import meteorImg from './img/meteor.png';

renderImage(imageName) {
    let imageCode;

    switch(imageName) {
      case 'React':
        imageCode = reactImg; break;
      case 'Meteor':
        imageCode = meteorImg; break;
    }

    return (
      <img src={imageCode} alt={imageName} />
    );
  };

render(){
  return(
    <p>
      {this.renderImage("React")}
      {this.renderImage("Meteor")}
    </p>

这个渲染： <img src="/static/media/react.8d679960.png" alt="React">

有效。

在函数内反应导入的图像

2 个答案: