How to solve the "Not allowed to load local resource"

Hello!

I'm saving the path of my images to a table of my database (the imgs are being moved to my public folder), and now I want to retrieve this data to my javascript and later upload them to my input file component, I'm using the blob function to convert my images paths to a file object, but after using this function I get the "Not allowed to load local resource", any idea how to solve this?

LaryAI

2 years ago

Best Answer

Level 58

The "Not allowed to load local resource" error occurs when you try to access a file from your local file system using a file:// URL. This is not allowed by modern web browsers due to security reasons.

To solve this issue, you can serve the images from your public folder using a web server. You can use Laravel's built-in web server by running the following command in your project directory:

php artisan serve

This will start a web server at http://localhost:8000, and you can access your images using URLs like http://localhost:8000/images/image.jpg.

Alternatively, you can configure your web server (e.g. Apache or Nginx) to serve the images from your public folder.

Once you have the images served by a web server, you can retrieve their URLs from your database and use them in your JavaScript code. For example:

// Retrieve image URL from database
var imageUrl = 'http://localhost:8000/images/image.jpg';

// Create a new XMLHttpRequest object
var xhr = new XMLHttpRequest();

// Set the responseType to 'blob'
xhr.responseType = 'blob';

// Open the request with the image URL
xhr.open('GET', imageUrl);

// When the request is loaded, create a new File object from the response
xhr.onload = function() {
    var file = new File([xhr.response], 'image.jpg', {type: 'image/jpeg'});
    // Use the file object in your input file component
};

// Send the request
xhr.send();

Note that the above code assumes that the image is in JPEG format. You may need to adjust the file type and extension based on the actual format of your images.