React JS数组图片无法加载？求助从数组显示图片的解决方法

React项目里直接用相对字符串路径作为图片src会失效，因为src目录下的资源需要经过webpack编译处理，打包后实际路径会变化。给你三种可行的解决方法：

方法1：直接导入图片资源到数组 #

把图片文件导入后再赋值给数组的picture字段，确保webpack能正确识别并处理这些资源：

import killianImg from '../assets/killian.png';
import audreyImg from '../assets/audrey.png';

export const memberList = [
  {
    id: '001',
    picture: killianImg,
    name: 'Killian Barbarin',
    poste: 'CEO',
    desc: "Après avoir découvert l'investissement en bourse, Killian a décidé de trouver un outil qui correspondait à ses attentes. C'est comme ça qu'algobourse est né. Il s'occupe aussi du développement de l'application sur ses heures perdues.",
  },
  {
    id: '002',
    picture: audreyImg,
    name: 'Audrey Rasolonjatovo',
    poste: 'Développeuse',
    desc: "Passionée par l'informatique, Audrey à choisi ce domaine dans le but d'aider et de simplifier le quotidien. C'est d'ailleurs ce qu'elle fait à algobourse où elle s'occupe du développement de l'application mobile et ce pour la durée de son alternance.",
  },
]

方法2：使用require动态加载图片 #

如果不想逐个导入，可以用require动态引入图片，注意要取.default（因为webpack处理后导出的是模块对象）：

export const memberList = [
  {
    id: '001',
    picture: require('../assets/killian.png').default,
    name: 'Killian Barbarin',
    poste: 'CEO',
    desc: "Après avoir découvert l'investissement en bourse, Killian a décidé de trouver un outil qui correspondait à ses attentes. C'est comme ça qu'algobourse est né. Il s'occupe aussi du développement de l'application sur ses heures perdues.",
  },
  {
    id: '002',
    picture: require('../assets/audrey.png').default,
    name: 'Audrey Rasolonjatovo',
    poste: 'Développeuse',
    desc: "Passionée par l'informatique, Audrey à choisi ce domaine dans le but d'aider et de simplifier le quotidien. C'est d'ailleurs ce qu'elle fait à algobourse où elle s'occupe du développement de l'application mobile et ce pour la durée de son alternance.",
  },
]

方法3：将图片放到public目录下 #

把assets文件夹移到项目根目录的public文件夹中，然后用绝对路径访问图片（public目录下的资源不会被webpack编译，直接复制到打包产物中）：

export const memberList = [
  {
    id: '001',
    picture: '/assets/killian.png',
    name: 'Killian Barbarin',
    poste: 'CEO',
    desc: "Après avoir découvert l'investissement en bourse, Killian a décidé de trouver un outil qui correspondait à ses attentes. C'est comme ça qu'algobourse est né. Il s'occupe aussi du développement de l'application sur ses heures perdues.",
  },
  {
    id: '002',
    picture: '/assets/audrey.png',
    name: 'Audrey Rasolonjatovo',
    poste: 'Développeuse',
    desc: "Passionée par l'informatique, Audrey à choisi ce domaine dans le but d'aider et de simplifier le quotidien. C'est d'ailleurs ce qu'elle fait à algobourse où elle s'occupe du développement de l'application mobile et ce pour la durée de son alternance.",
  },
]

核心原因 #

React项目中，src目录内的资源会被webpack处理，编译后会生成带哈希值的文件名，直接写字符串路径无法匹配到打包后的真实资源路径。通过导入/require的方式，webpack会自动处理资源路径，替换为正确的打包后地址；而public目录下的资源不受webpack编译影响，可直接用根相对路径访问。

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