image - 为 MERN 应用程序保存约 500 个图像文件的位置
问题描述
我正在构建一个体育网络应用程序,对于该应用程序,我需要每个 NBA 篮球运动员的缩略图。我编写了一个抓取图像路径的脚本(这样的链接 - http://a.espncdn.com/combiner/i?img=/i/headshots/nba/players/full/3414.png&w=350&h=254),所以我可以访问所有的图像,但我不确定 React 的最佳实践是在哪里保存这些类型的图像。我认为我的选择是:
- 将每个播放器的图像文件保存在应用程序目录中(保存其他图像的位置,我认为是我的应用程序的资产文件夹),然后将它们导入应用程序。
- 不要保存图像文件,而是在我的数据库中创建一个包含玩家 ID 和图像路径的表,并让我的应用程序使用这些路径来获取已经托管的图像。
- A和B本质上都是。先保存图片文件,然后自己重新托管图片文件,并链接到这些新托管的图片。
这三个选择有意义吗?我觉得(3)是最好的选择,但也需要最多的工作。(2) 似乎是最简单但最不可靠的,因为我不能相信已经托管的图像 url 将始终有效,并且 (1) 似乎不是最好的方法,因为它需要数百个 import 语句在我的应用程序来获取所有图像。
不是编码问题,但我认为这具有广泛的适用性,并希望该帖子能够保持不变。对此的任何帮助或想法表示赞赏!
编辑:作为参考,这里有一些类似于我的表格的内容:
> player.image.df
[,1] [,2]
[1,] "alex-abrines" "http://a.espncdn.com/combiner/i?img=/i/headshots/nba/players/full/2995702.png&w=350&h=254"
[2,] "quincy-acy" "http://a.espncdn.com/combiner/i?img=/i/headshots/nba/players/full/6576.png&w=350&h=254"
[3,] "steven-adams" "http://a.espncdn.com/combiner/i?img=/i/headshots/nba/players/full/2991235.png&w=350&h=254"
[4,] "bam-adebayo" "http://a.espncdn.com/combiner/i?img=/i/headshots/nba/players/full/4066261.png&w=350&h=254"
[5,] "arron-afflalo" "http://a.espncdn.com/combiner/i?img=/i/headshots/nba/players/full/3187.png&w=350&h=254"
[6,] "alexis-ajinca" "http://a.espncdn.com/combiner/i?img=/i/headshots/nba/players/full/3410.png&w=350&h=254"
[7,] "cole-aldrich" "http://a.espncdn.com/combiner/i?img=/i/headshots/nba/players/full/4267.png&w=350&h=254"
[8,] "lamarcus-aldridge" "http://a.espncdn.com/combiner/i?img=/i/headshots/nba/players/full/2983.png&w=350&h=254"
[9,] "jarrett-allen" "http://a.espncdn.com/combiner/i?img=/i/headshots/nba/players/full/4066328.png&w=350&h=254"
[10,] "kadeem-allen" "http://a.espncdn.com/combiner/i?img=/i/headshots/nba/players/full/3134880.png&w=350&h=254"
这些不是我的链接,我无法知道 ESPN 是否会更改这些链接,这就是为什么我认为 (3) 是这里最好的方法。但我不确定如何快速轻松地托管我自己的图像。
解决方案
我会推荐第三个选项,它绝对是确保这些图像可用并根据需要使用它的最可靠方法。
您不必为每个图像进行导入,一旦您在数据库中拥有所有图像路径,您就可以使用 require() 函数动态加载它。
您只需编写一个脚本来下载 CDN 上的所有图像并将其新路径保存到您的数据库中。
-编辑-
我正在考虑您的服务器和带宽足够强大,可以管理自托管图像生成的额外工作。
推荐阅读
- javascript - 如何设置b-pagination的主色?
- laravel - Laravel 8 Jetstream Livewire 密码确认模式不起作用
- python - 如何使用 python 将字符和整数写入具有特定精度的二进制文件?
- python - 如何在 Visual Studio Code 中将我的解释器从 Python 3.8 更改为 Python 3.9?[已解决]
- flutter - 如何从 Flutter 中的另一个类调用对话框函数
- jquery - React - 如果你知道它的类,如何获得特定 div 的高度
- powershell - 为什么变量在 Powershell 中不能与 Get-Aduser 一起使用?
- django - 如何让我的用户从我的 django 应用程序发送电子邮件?
- c++ - 在范围出口处捕获调用者行号
- mongodb - 带有对象数组的猫鼬查询