React中通过props传递图片URL加载渲染图片出现失效问题如何解决

问题原因 #

• 直接向require传入变量参数：webpack等打包工具仅在编译阶段静态解析资源路径，无法识别动态变量对应的实际文件，不会将目标图片打包到输出产物中，导致运行时找不到资源。
• 直接使用开发环境相对路径：项目打包后输出的目录结构和源码目录结构完全不同，开发阶段的相对路径无法匹配到打包后图片的真实线上地址。

可行解决方案 #

方案1：固定路径前缀，仅动态传入文件名 #

如果所有图片都存放在../images目录下，调整props仅传递图片文件名，组件内拼接完整路径：

import React from 'react'

export default function PropertyImage({ imageName }) {
  // 部分脚手架开启esModule配置时，需要加.default取实际路径
  return (
    <div>
      <img src={require(`../images/${imageName}`).default} alt="property" />
    </div>
  )
}

调用组件时仅传文件名：<PropertyImage imageName="unnamed.jpeg" />

方案2：父组件提前处理资源引用 #

在父组件调用时就完成资源引入，将处理好的路径直接传递给子组件：

// 父组件中调用
import PropertyImage from './PropertyImage'

function Parent() {
  return <PropertyImage image={require('../images/unnamed.jpeg').default} />
}

// 子组件直接使用即可
export default function PropertyImage({ image }) {
  return (
    <div>
      <img src={image} alt="property" />
    </div>
  )
}

方案3：将图片放入public目录使用绝对路径 #

把图片存放目录放到项目的public文件夹下，打包时public下的所有资源会直接拷贝到输出根目录，直接用绝对路径引用即可：

// 示例：将images目录放到public下后，直接写根路径
export default function PropertyImage({ imagePath }) {
  return (
    <div>
      <img src={`/images/${imagePath}`} alt="property" />
    </div>
  )
}
// 调用时传文件名：<PropertyImage imagePath="unnamed.jpeg" />

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