如何通过函数指定模块名，解决img标签动态绑定src无法加载图片的问题

问题根因 #

你当前的代码存在三个核心问题：

• name函数仅返回纯字符串'sea'/'forest'，和你在组件内通过import引入的图片资源变量没有任何关联。构建工具处理图片import时会将图片资源转换为最终的打包后访问路径，直接返回的普通字符串不会对应到这个路径，自然无法加载图片。
• name函数没有覆盖全分支返回值，传入其他参数时会返回undefined，也会导致加载异常。
• item.jsx是命名导出name函数，组件内用默认导入import name from './item.jsx'的写法是错误的，会导致拿到的name值为undefined，需要改为import { name } from './item.jsx'匹配导出方式。

解决方案 #

方案1：直接在组件内做图片映射（最简洁） #

不需要额外的item.jsx工具函数，直接用对象做映射即可，后续新增图片仅需加键值对，维护成本极低：

import forest from '../media/forest.png'
import sea from '../media/sea.png'

// 定义图片映射表，key和你要传入的标识对应，value是引入的图片资源
const imgMap = {
  sea,
  forest
}

const App = () => {
  return (
    <div>
      <img src={imgMap['sea']} alt="海景" />
    </div>
  )
}

方案2：映射逻辑抽离到item.jsx #

如果必须要把图片匹配逻辑抽离到公共文件，可以直接在抽离文件内引入图片后返回：

// item.jsx内直接引入对应的图片资源
import forest from '../media/forest.png'
import sea from '../media/sea.png'

// 建议改名避免和变量名冲突，逻辑更清晰
export const getImgSrc = (text) => {
  const imgMap = {
    sea,
    forest
  }
  // 兜底返回空或者默认图路径，避免异常参数返回undefined
  return imgMap[text] || ''
}

组件内直接调用即可：

import { getImgSrc } from './item.jsx'

const App = () => {
  return (
    <div>
      <img src={getImgSrc('sea')} alt="海景" />
    </div>
  )
}

方案3：不改动现有name函数的兼容方案 #

如果不想调整现有name函数的逻辑，也可以在组件内把函数返回的字符串对应到引入的图片资源：

import forest from '../media/forest.png'
import sea from '../media/sea.png'
import { name } from './item.jsx'

const imgMap = {
  sea,
  forest
}

const App = () => {
  return (
    <div>
      <img src={imgMap[name('sea')]} alt="海景" />
    </div>
  )
}

优化建议 #

• 建议给img标签加上alt属性，符合可访问性规范
• 映射逻辑优先用对象代替多分支if判断，后续新增资源时无需修改判断逻辑，维护更方便
• 所有公共工具函数都建议加上兜底返回逻辑，避免异常参数导致页面报错

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