时间戳

首页 > 解决方案 > 根据随机选择添加图像以响应应用程序

node.js - 根据随机选择添加图像以响应应用程序

问题描述

所以，我有一个应用程序可以从列表中随机选择口袋妖怪来为用户构建一个口袋妖怪团队。

我知道如何导入图像以在反应应用程序中使用。但是我如何使用 React 向用户提供图像？我目前将精灵放在两个不同的地方，因为我试图查看是否需要从客户端或服务器端发送。但我的文件结构如下

client/
   src/
     components/
        sprites/
        pokemon.js
server.js
sprites/

当页面加载时，它会从服务器请求一个随机的 pokemon。然后这段代码执行

<h2>Pokemon</h2> 
              <ul>
                {this.state.pokemon.map(pokemon => 
                  <li key={pokemon.id}> <img src={'./sprites/' + pokemon.name + '.png'} alt={pokemon.name}></img> {pokemon.name} {pokemon.galar_dex} </li>
                )}
              </ul>
              <br/>

但不是显示图像，而是显示替代文本。我如何以这种方式向用户提供图像？

标签： node.jsreactjsexpress

解决方案

你可以做这样的事情

<img src={require(`./sprites/${pokemon.name}.png`)} alt={pokemon.name} />

推荐阅读