网页加载本地图片遇“Not allowed to load local resource”错误求助

尝试将桌面图片加载到网页时，遇到报错：Not allowed to load local resource，目前未找到解决办法。我认为代码逻辑没问题，相关代码如下：

JavaScript代码 #

const photoContainer = document.getElementById("photoContainer");

const photoDirectoryPath = "file:///D:/path1/Photo1"; // Replace with your actual path
const specificPhotoName = "1.jpg"; // Replace with the specific photo name

function fetchPhoto() {
  fetch(photoDirectoryPath + "/" + specificPhotoName)
    .then(response => response.blob())
    .then(blob => {
      const reader = new FileReader();
      reader.onload = function(event) {
        const img = document.createElement("img");
        img.src = event.target.result;
        photoContainer.innerHTML = "";
        photoContainer.appendChild(img);
      };
      reader.readAsDataURL(blob);
    })
    .catch(error => console.error("Error fetching photo:", error));
}

fetchPhoto();

HTML代码 #

<!DOCTYPE html>
<html>
<head>
<title>Photo Display</title>
<link rel="stylesheet" href="test_bed.css">
</head>
<body>
  <div id="photoContainer"></div>

  <script src="test_bed.js"></script>
</body>
</html>

CSS代码 #

#photoContainer {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
border:3px solid #2a06f4;
height: 400px;
width: 400px
}
#photoContainer img {
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
}

已尝试过以下方法，但问题仍未解决：

• 临时关闭浏览器安全限制
• 使用Visual Studio Code本地服务器运行项目

内容的提问来源于stack exchange，提问作者Rijja Zia