时间戳

首页 > 解决方案 > 在反应中过滤的图像的不同 alt 属性

reactjs - 在反应中过滤的图像的不同 alt 属性

问题描述

我有一个图像网格，显示从我的组件 GetToolIcon 中过滤的不同图标。我想为每个属性添加一个带有不同字符串的 alt 属性。我怎样才能做到这一点？

这是我网格上的代码：

<div className='tool-item-content'>
        <Thumbnail src={getToolIcon(props.tool.id)} />
        <h3>{props.tool.toolName}</h3>
      </div>

我的组件：

export function getToolIcon(toolId) {
  switch (toolId) {
    case A_TOOL_ID: return '/images/a-logo.png'
    case L_TOOL_ID: return '/images/l-logo.svg'
    case M_TOOL_ID: return '/images/m-01.svg'
    case P_TOOL_ID: return '/images/p-logo.svg'
    case R_TOOL_ID: return '/images/r-logo.svg'
    case V_TOOL_ID: return '/images/v-logo.svg'
    case G_TOOL_ID: return '/images/g-logo.png'
    case N_TOOL_ID: return '/images/n-logo.png'
    case R_TOOL_ID: return '/images/r-logo.png'
    default: return '/images/triangle-blue.svg'
  }
}

我的案例代码的示例如下：

case P_TOOL_ID:
      return {
        component: <AboutP tool={tool} />,
        logoImage: '/images/p-logo.svg',
        graphicImage: '/images/a-p-logo.png'
      }

标签： reactjs

解决方案

您可以添加另一个与 GetToolId 函数相同但返回 alt 字符串而不是图像的函数。

您的组件：

<Thumbnail src={getToolIcon(props.tool.id)} alt={getAltValue(props.tool.id)}   />

和你的 alt 函数：

export function getAltValue(toolId) {
  switch (toolId) {
    case A_TOOL_ID: return 'Alt string 1'
    case L_TOOL_ID: return 'Alt string 2'
    case M_TOOL_ID: return 'Alt string 3'
    default: return 'This is an image'
  }
}

推荐阅读