Why not add libraries like picsum to display the image in order to display the site in its real form with the images. Libraries that provide images temporarily via API such as (picsum or placehold.co … etc.) must be used. The important thing is to display the images in the projects.
thats a nice idea… will look into this for sure
As far as I know the problem is at the moment that Binary files at the moment are not working at all within the container.
External References to images are working, if the site which provides it, sends the correct headers.
See:
1 Like
"Initially, I encountered problems displaying images in the preview. After numerous failed attempts, I decided to try a different approach. I instructed the LLM (Gemini 2.0) to create a basic webpage displaying a mountain image, sourcing the image from Pexels. This worked successfully, and I immediately saved the result. I realized this could be my workaround for this mysterious hiccup. Following this, I used the same successful technique for displaying an image on the main page to create a sidebar. For this, I manually obtained a URL from a public domain site by right-clicking, and then used that URL in the instructions. sometimes you just gotta start with the most basic instruction and baby step it.
This is an idea, although I don’t know if it can be achieved or not.
The main problem: As I mentioned earlier, the bolt.diy container is not able to process binary files directly, in addition to potential problems with HTTP headers from some image sources.
To solve this radically, bolt.diy developers can create a Local Image Proxy (LIP)
The basic idea is to create an intermediary service that runs on localhost as an “image proxy” between the bolt.diy container and external image sources. This proxy will handle the following tasks:
Image Fetching: The proxy fetches images from the external source (either a direct link or an API like picsum).
HTTP Header Handling: The proxy makes sure that the correct HTTP headers (such as Content-Type) are sent with the returned image. This ensures that the browser will recognize the image type and display it correctly.
Caching: The proxy caches images on the localhost. This improves performance significantly, as the image will not be fetched from the external source every time it is displayed.
Serving images from localhost: The proxy serves images to the bolt.diy container via a local URL (e.g. localhost:port/images/image_id*png). This solves the problem of the container not being able to handle binary files directly, as the container now handles a plain URL.
How to implement this solution?
The local image proxy can be implemented using different languages and technologies, such as:
Node.js with Express.js: An excellent and relatively easy option. Libraries like request or axios can be used to fetch images, and the express library to create a simple web server that serves images.
How to use this proxy in bolt.diy?
Instead of using the original image URL directly in the bolt.diy project, the local proxy URL is used:
localhost:3000/images/https://picsum.photos/200/300
Note that we pass the original image URL as part of the proxy URL path.
Advantages of this solution:
- Radical solution: It addresses the fundamental problem of the container not being able to handle binary files.
- Performance improvement: Caching reduces the number of external image requests.
- HTTP header control: Ensures images are displayed correctly.
- Flexibility: Any external image source can be used.
Disadvantages of this solution: - Requires additional programming: Requires the creation and maintenance of an image proxy.
2 Localhost dependency: Relies on running the proxy on the localhost.
1 Like