React（Create React App）中如何在函数内动态展示已导入图片？

嘿，我明白你的问题了！你现在的代码里，imageName.toLowerCase()+'Img'只是生成了一个字符串"reactImg"，而不是你之前导入的那个实际的图片变量，所以浏览器只会把这个字符串当作src的值，而不是真正的图片路径。下面给你两种靠谱的解决方案：

方案一：用对象映射已导入的图片 #

这是最直观的方式，把你导入的图片都放到一个映射对象里，然后通过图片名称去查找对应的变量：

import React, { Component } from 'react';
import reactImg from './img/react.png';
// 如果以后要加其他图片，直接在这里导入并添加到映射对象即可
// import vueImg from './img/vue.png';

// 创建图片映射表，键是图片名称的小写，值是导入的图片变量
const imageMap = {
  react: reactImg,
  // vue: vueImg
};

export default class MyPage extends Component {
  renderImage(imageName) {
    // 转成小写后从映射表取对应的图片路径
    const targetImage = imageMap[imageName.toLowerCase()];
    return ( 
      <img src={targetImage} alt={imageName} />
    );
  }
  
  render() {
    return ( 
      <p>{this.renderImage("React")}</p>
    )
  }
};

这种方法的好处是清晰可控，所有图片都提前导入，webpack会帮你处理好打包，适合图片数量不多、固定的场景。

方案二：动态require加载图片 #

如果你的图片数量比较多，或者不想一个个手动导入，可以用require来动态加载（Create React App的webpack配置支持这种写法）：

import React, { Component } from 'react';

export default class MyPage extends Component {
  renderImage(imageName) {
    // 动态构建图片路径，注意文件名要和实际一致（这里假设都是png格式）
    // require返回的对象里，default才是图片的路径
    const imgSrc = require(`./img/${imageName.toLowerCase()}.png`).default;
    return ( 
      <img src={imgSrc} alt={imageName} />
    );
  }
  
  render() {
    return ( 
      <p>{this.renderImage("React")}</p>
    )
  }
};

这里要注意一点：webpack需要在打包时能提前解析到可能的路径，所以不要用完全动态的路径（比如整个路径都是变量），这种固定前缀+变量后缀的写法是没问题的。

两种方法都能解决你的问题，你可以根据自己的实际场景选择~

内容的提问来源于stack exchange，提问作者Franck Boudraa