我有一个问题，需要帮助。我有一个我想创建的Codepen页面(已经创建了一部分，请参阅下面的链接示例(，它选择了4个随机形状并在屏幕上显示，一次显示一个，形状是正方形、三角形、圆形或十字形，当你再次单击图片时，它会移动到下一张图片，计算机会说出上一张图片的名称。
我想做的是从我的Dropbox帐户和我共享的文件夹中获取图片，然后选择并显示在屏幕上。计算机说出图片的单词，即三角形的图片，计算机说三角形。如果Dropbox不合适，请帮助我提供什么是好的替代品和免费的。
我不知道我是否正确地在Dropbox中共享了我的文件夹，我看不到每张照片的确切URL在哪里？或者如何将图片链接到相关联的单词。
下面是一个样本，我得到了帮助，可以用随机的颜色来做这件事，现在我想用照片来做类似的事情。
我需要帮助的示例页面 https://codepen.io/3DAttic/pen/abNNxRP
创建的示例页面，其中项目适用于随机颜色；https://codepen.io/3DAttic/pen/gOrrQzq
提前感谢尼克，又名3DAttic。
'HTML'
<font size=4> <body onkeydown="speakPrevious()" onkeyup="getNewRandomPicture()">
<p> <b>This webpage is going to show 4 random pictures of shapes, Square, Cross, Triangle and Circle.
The algorithm will select at random and <U>You MAY see the same shape several times in a row. This is expected behavior and NOT a fault.</U>
This will work, using a computer and keyboard or on mobile device using the browser. On the mobile device touch on the text. It may help by placing your finger near the top of the webpage in the phone </p>
<p>On a computer click inside the color and press any keyboard key to move to the next shape.</b></p>
<p> <font size=4><b><U>If the speach stops, just refresh the page again</b> </p>
'JS'
const page = document.querySelector("body");
page.addEventListener("click", function () {
speakPrevious();
getNewRandomPicture();
});
speakPrevious();
function speakPrevious() {
var synth = window.speechSynthesis;
var utterThis = new SpeechSynthesisUtterance(window.value);
synth.speak(utterThis);
}
getNewRandomPicture();
function getNewRandomPicture() {
var myArray = ['Triangle','Square', 'Circle', 'Cross' ];
var rand = myArray[Math.floor(Math.random() * myArray.length)]; document.getElementsByTagName("body")[0].style.backgroundColor = rand;
var oldRand = rand;
window.value = oldRand;
}
Dropbox在2017年删除了公用文件夹，您现在可以选择共享文件并复制添加到脚本中的链接。
我仍然需要知道如何将此添加到我最初的问题中
您可以使用Dropbox api，通过http请求访问数据。
有几种方法可以获得图像内容。其中一些端点是：
- 文件GetThumbnailBatch
获取一些图像的缩略图。我认为这是最好的选择，因为你可以选择图像的分辨率并使其更快。
- 文件GetTemporaryLink
获取文件的4小时链接
- 文件下载
下载文件数据
以下是API和所有端点的文档：
https://www.dropbox.com/developers/documentation/http/documentation
您可以做的是：
- 使用Dropbox共享图像创建链接
- 转到链接
- 右键单击图像
- 选择"；在新标签中打开图像">
- 复制新选项卡的URL
- 使用HTML的img标记的src值中的URL：<img src"您的链接">lt/>(参见示例(
<img src="https://cdn.pixabay.com/photo/2020/05/16/16/43/book-5178205_960_720.jpg"></>您可以将Dropbox用作文件宿主。以下是如何使用它为您的应用程序托管图像。
1-转到你的Dropbox公用文件夹。
2-将您的图像上传到此文件夹。
3-单击图像并选择复制公共链接。
4-复制URL并将其用于图像src值。
希望它能帮助你，干杯