I have a classic app with spring boot as backend and Angular as Frontend. In the app there is a button to upload an image, this image is saved somewhere in the backend, and the relative path to that image is saved in the db as e.g. "uploads/image.jpeg".
I want to interpolate the src attribute of the <img> tag to access those specific files on my server file system. whenever I do that, that path gets converted into "localhost/4200/uploads/image.jpg" and issued as a get request.
However, if the src attribute is not interpolated it access the normal file without any problems. Only when interpolated does it issue a get request
Angular part:
<img class="img-responsive custom-img" src={{article.imageUrl}} referrerpolicy="no-referrer">
basically article.imageUrl = "uploads/image.jpeg", why does it get http://localhost/4200 appended to it ?
Error:
GET http://localhost:4200/uploads/image.jpeg 404 (Not Found)
I want to disable this behaviour.
If you want to access the image dynamically on the client side, there must be a get request for that image.
To load the image without a get request, reload the whole page after a user uploads an image, thus sending a get request for the whole page and not just the image. Now on the server side add the image to the DOM using the local path, and send back the whole hardcoded page to the client.
Related
I am doing a project, where I need to show an image on html page. The image is located in a network drive. Using the below tag to refer to the image, I receive a "Not allowed to load local resource:" error.
<img src="file://sc19/dept0213/SSC_Data/SVD/SVD%20Robot%20Experiment/4b9262caa1b64079ad8b31c3a3662598_1/Measurement/bot_Images/4.png" alt="Image">
If I however, open a new tab in the same Edge web browser, and copy the file://sc19/dept0213/SSC_Data/SVD/SVD%20Robot%20Experiment/4b9262caa1b64079ad8b31c3a3662598_1/Measurement/bot_Images/4.png into the address bar, the image is displayed inside the web browser. I have tried with Google Chrome in stead of Microsoft Edge and turned off the security feature, but still get the same error.
Additional information.
The HTML page was rendered using Django as backend. In my Django template I have.
<img src="file://sc19/dept0213/SSC_Data/SVD/SVD%20Robot%20Experiment/4b9262caa1b64079ad8b31c3a3662598_1/Measurement/bot_Images/4.png" alt="Image">
Could an alternative approach be that the front end is doing a request to the backend that then fetches the image, and put it somewhere that can be reached from front end?
For my project, the solution I ended up using was for my frontend to send a request to the backend. The backend then fetches the image, and send it as a blob to the frontend. I know that setting up a webserver is another possibility, but in this case my Django backend already acts as a webserver.
I'm working on embedding pixel tracking on our pages. We have a setup wherein the users could enter up to 4 pixel tracking URLs. Basically, for each pixel tracking URL, I just need to append a script tag with the URL in its src attribute.
For example:
URL: https://code.jquery.com/jquery-3.6.1.min.js
Then the script would be:
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
But what happens when the URL is an image? I tried this and it's giving me a "refused to execute script" error due to the mime type. I kinda expected this since it is an image and I'm alright with the error since the image call is still being logged in the network and was actually successful since it has a status code of 200. I just need to be sure that the image will still be logged in the network with a successful call. Does anyone know if there are any instances that the browser will block this kind of scenario and will cause the web service call for the image to fail? Thanks
I need to download an image on one component (which will be through <img src="path">) and send it to another component. I'm thinking of using a service to communicate and append an <img src="path"> tag to the second components template.
I'm not sure what happens under the hood and want to confirm if the browser will download the img again if I append the tag or know if this is the right way to send image data in Angular.
How can I pass a down the same image to another component and make sure I'm not requesting the resource again?
The img tag is fully managed by your browser, meaning that you don't have control over its behavior.
That being said, the browser is supposed to have a cache system, so if you request twice the same image AND the server's response is 304 (Not Modified) the browser is supposed to use the cache.
If you want to make sure that you have a cached image, you can implement your own img wrapping component that would GET the image, create a blob from it and inject it in an img component, this way you can cache the image blob by yourself in a dedicated service.
I have a page that is constructed by GWT, when the page get loaded, I will display some required content in it. And then if user click a certain button on the page, I will send request to server side and server will return me a HTML file(a chart generated by jquery plotting tool) stored in local directory, I need to display this HTML file into the existing GWT page's certain widget.
I tried to use Frame in GWT to link to the local HTML file and display it, it get failed, googled and found it's because of browser security setting.Please share your thought, any idea is appreciated.
I am trying to create a "smart" web browser to load local images. Basically it works as a GUI for an application. I am using QTWebKit to power the browser, the problem is that the images of a given page can be found in different places, some are local files, others are in different resource files.
For example:
an HTML node to load image x.jpg can look like <img src="x.jpg"> and for image y.gif on the same page it can be <img src="y.gif">, now x.jpg is a local file that can be either in the root directory or in some other place. y.gif on the other hand can be in a resource file.
I want the web browser first to set the paths to all possible sources and once the page has been loaded or preferably while the page is loading searches for the images and loads them from their original path.
I considered the option of reading the HTML data first, parse it and search for the resources one by one, then edit the html to include the full path of the image but that would take a long time than what I want and it isn't practical.
Can any one put me on the right direction or does any one have any ideas on how such a design can be implemented.
EDIT: I have manage to delegate the requests by overriding the QNetwrokAccessManager and QNetwrokReply and been able to get the path to the image. The only problem is loading the image into view. I am currently using QHttp to handle the incoming requests but so far I haven't been able to load the image.
been trying to use QHttp's Get() function and passing the path to the jpg image as (file:///path/to/image) and also tried using the local path but nothing is working.
Take a look at How to tell QWebPage not to load specific type of resources?
You need the same approach but instead of dropping request by constructing QNetworkRequest with empty QUrl you need to pass url to the file on the disk.