我确实从 githab 安装了 annotorious 并创建了一个 html 文件并复制了 documentation 上的代码，但什么也没发生，只是显示了没有 annotorious 的图像。 这是我的代码
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="annotorious.min.css">
</head>
<body>
<div id="content">
<img id="hallstatt" src="640px-Hallstatt.jpg">
</div>
<script>
(function() {
var anno = Annotorious.init({
image: 'hallstatt' // image element or ID
});
anno.loadAnnotations('annotations.w3c.json');
// Add event handlers using .on
anno.on('createAnnotation', function(annotation) {
// Do something
});
})()
</script>
<script type="text/javascript" src="annotorious.min.js"></script>
<script type="text/javascript" src="annotorious.umd.js.map"></script>
<script type="text/javascript" src="recogito-polyfills.js"></script>
</body>
</html>
您可以在这里看到我将所有文件都放在同一目录中：
Directory of C:\Users\YCH\Desktop\test_annotation
03/11/2023 12:42 <DIR> .
03/11/2023 12:42 <DIR> ..
03/11/2023 12:41 7 368 640px-Hallstatt.jpg
03/11/2023 14:18 10 311 annotorious.min.css
03/11/2023 12:52 286 326 annotorious.min.js
03/11/2023 12:36 1 055 483 annotorious.umd.js.map
03/11/2023 14:16 937 index.html
03/11/2023 12:36 161 729 recogito-polyfills.js
我测试了 css（通过更改主体颜色）和 JavaScript（通过 console.log），两者都配置了 html 文件，但仍然不起作用
我怀疑您正在通过在浏览器中打开 HTML 文件来运行演示页面。
到达显示
loadAnnotations如果您查看浏览器控制台，您可能会看到
loadAnnotations要从 JSON 文件加载注释，请使用 http-server 等开发服务器为您的工作目录提供服务。