The problem I am facing is that I cannot seem to fix the error that comes to me stating "Not allowed to load local resource:" I do not know how to fix it I don't believe that there's a problem with my code but here is the javascript code:
`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;`your text`
photoContainer.innerHTML = "";
photoContainer.appendChild(img);
};
reader.readAsDataURL(blob);
})
.catch(error => console.error("Error fetching photo:", error));
}
fetchPhoto();`
and here is the html code :
`<!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>`
and 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;
}`
I've tried to Temporarily Disable Security Restrictions and tried Using Local Servers like Visual Studio Code