如何在React.js中使用状态变量动态切换图片源？

我来帮你搞定这个图片切换的问题！你的代码里有两个关键问题导致图片无法正常显示，咱们一步步修正：

1. 修正JavaScript内置对象的拼写错误 #

你在生成随机item的时候用了math.floor()，但JavaScript里的数学对象是大写开头的Math，小写的math是未定义的变量，这会导致getNew函数执行出错，连随机选择图片的逻辑都跑不起来。把它改成Math.floor()就好。

2. 正确处理React中的动态图片路径 #

React项目里，直接用字符串形式的相对路径（比如./images/test1.jpg）作为img的src是不行的——因为webpack在打包时只会处理通过import或require引入的资源，单纯的字符串路径不会被解析成打包后的正确URL，浏览器自然找不到图片。

这里给你两种可行的解决方案：

方案一：将图片放在public文件夹中 #

把你的图片文件移到项目根目录的public/images文件夹下，然后修改items里的路径为根路径开头的绝对路径：

const items = [
  {ItemName: 'test1', ItemImg: '/images/test1.jpg'}, 
  {ItemName: 'test2', ItemImg: '/images/test2.jpg'} 
];

public文件夹下的资源可以直接通过根路径访问，这样setState后img就能正确加载图片了。

方案二：用require动态引入src下的图片 #

如果图片还是想放在src目录的images文件夹里，那就用require()来动态引入图片资源，修改setState的逻辑：

this.setState({
  img_path: require(item.ItemImg).default,
  alt: item.ItemName
});

注意：这里的item.ItemImg路径要和组件文件的相对路径一致（比如你的组件在src目录下，图片在src/images，那路径就是./images/test1.jpg）。

另外还要提个小细节：React的组件名必须大写开头，你的myImg应该改成MyImg，不然React会把它当成普通HTML标签处理，可能引发其他问题。

修正后的完整代码 #

import React, { Component } from 'react';
import Blank from './images/blank.jpg';

class MyImg extends Component {
  constructor(props) {
    super(props);
    this.state = {
      img_path: Blank,
      alt: 'blank',
    };
    this.getNew = this.getNew.bind(this);
  }

  getNew() {
    const items = [
      {ItemName: 'test1', ItemImg: './images/test1.jpg'}, 
      {ItemName: 'test2', ItemImg: './images/test2.jpg'} 
    ];
    // 修正Math的拼写
    var item = items[Math.floor(Math.random() * items.length)];
    // 用require动态引入图片
    this.setState({
      img_path: require(item.ItemImg).default,
      alt: item.ItemName
    });
  }

  render() {
    return (
      <div>
        <img 
          src={this.state.img_path} 
          onClick={this.getNew} 
          alt={this.state.alt} 
          width={150} 
        />
      </div>
    );
  }
}

export default MyImg;

这样修改后，点击图片应该就能正常切换显示不同的图片了！

内容的提问来源于stack exchange，提问作者Coding Duchess