Question

我需要根据从我正在使用的REST API传回的值从本地来源中选择一个图像。例如：

//Psuedo-call from the API
var imageIdToSelect = response.data.imageId

//Then later in the render()
<img src={ baseUrl + imageIdToSelect } />

我对此有一个解决方案，那就是使用require()，因为这样我可以像这样附加网址：

<img src={ require(baseUrl + imageIdToSelect) } />

这很好，但是，我使用的Microsoft TSLINT设置不允许require()超过文件“ import”顶部的首选no-require-imports。

我知道我并不想让整理工具将我的工作控制到我盲目遵循规则的地步。所以我的问题有两个：

为什么不赞成使用require()这样的方式。我想到的一个原因是，如果所有外部文件/资源都在文件的顶部声明，那么您不必查看源代码即可将其隐藏在函数中。
import x from './'解决方案的外观如下所示？我见过人们在其图像文件夹中创建index.js和index.d.ts文件来导入和导出其中的所有图像，但这似乎有点多余。

编辑：我也刚刚意识到，将require()与非文字字符串一起使用也违反了我的ts-lint。

预先感谢