如何在Netlify上限制图片文件直接访问，仅允许主页面加载？

我正在搭建一个网站，部署在Netlify平台，核心需求如下：

• 访问主页面（index.html）时可正常加载并查看图片
• 直接通过URL访问图片文件时，无法查看图片

1. 尝试创建与图片文件名同名的目录，让index.html从该目录加载图片，但操作系统不允许创建与文件同名的文件夹；若在目录名末尾加空格，本地测试发现主页面无法获取该目录下的图片。
2. 测试了iframe访问限制方案：
   创建test1.html和test2.html，通过检测页面是否处于iframe内实现访问限制，test2.html通过iframe嵌入test1.html。代码如下：

   <!--Test 1 Code:-->
   <html>
       <head>
           <script>
               if ( window.location !== window.parent.location ) {
                 console.log('The page is in an iframe, continuing.')
               } else{
                   location.replace('403.html')
               }
               </script>
       </head>
       <body>
           <h1>test</h1>
       </body>
   </html>
   

   <!--Test 2 Code:-->
   <iframe src="test1.html" height="100%" width="100%" frameborder="0"></iframe>
   

   该方案并不完美，目前打算尝试通过链接仓库或文件托管服务展示图片，同时禁用右键功能，但不确定是否可行。

希望能得到适用于Netlify平台的解决方案，实现仅允许主页面加载图片、禁止直接访问图片文件的需求。

内容的提问来源于stack exchange，提问作者npxr c