How to change image source context present inside rich text editor - blogs

I am developing a blog application.
Initially I want everything to be hosted on a single Tomcat server and images to be served through tomcat only.
Problem that i am facing is while saving the content of rich text editor image sources are saved in database along with the application-context e.g.,
<img src="/application-context/image/abc.jpg">;
So if in future I want to go for any cdn or image servers separately, how should I design the application so that I am able to change image tags through property configuration only.
Below is what I am desiring
<img src="http://www.myimageserver.com/image/abc.jpg">;
Thanks

Related

src in html not allowed to load a local resource

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.

Ionic 2 - IMG tag web source, where are images stored?

Using Ionic for the first time, I have a loop where I set a number of img tags to a random source - the source of the img is on the web e.g:
<img [src]="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/1200px-Google_2015_logo.svg.png" />
When the app runs, i assume the img is downloaded somewhere locally to display (cached?)? My assumption may be wrong here.
If it is - where is it saved? the reason I ask is that if I want to then share the image (native mobile share sheet) I want to share the local copy not download the img again (especially expensive for gifs).
I'm hoping not to need to handle saving the images locally manually.
Thank you,

Finding unused image files from web server

recently I have a task. There are many image files (of format .jpg/.gif) uploaded to a web server. However, actually not all image in the web server is shown on the real web site. Now I want to list out the image files that is not on the web site but in the web server, so I want to find a tool that can generate a list of images of a web site, I have found a firefox extention call Link Gopher which may help to generate all links from a web page, but since the web site has many pages, I must do the task page by page if I use Link Gopher.
As a result, I want to know is there any method that can do the task faster?

Some weebly features don't work when exporting to HTML and hosting on a different server

Recently I've been tasked with redesigning a website for the current company I'm working at. I've been using weebly to make the site, and then exporting the HTML to be re-hosted on the company's servers.
However, I've noticed that some functionality in weebly's code has stopped working. I imagine this might be due to weebly hosting some elements on their own servers, but this is merely a beginners best guess.
1. The picture for the logo on the banner does not appear once the HTML is rehosted
For comparison, here's the site while hosted on weebly:
http://mjmacoustique.weebly.com/
and the site on the company's servers:
http://www.mjm.qc.ca/redesign2015/
When weebly hosts, the ''MJM'' image should be on the top left and function as a return to home page button when clicked. However, when it's hosted on the company's server, the image is not found.
2. On Firefox, the background image of the home page is replaced with an all black background
When opened in firefox, it fails to load the background image of the main page.
Any help or solutions to these problems would be greatly appreciated.
Thanks.
I can help with question #1: the logo is hosted on weebly's servers, but in the html it's written in a shortcut method like this example: /uploads/2/6/8/5/26851316/1434298489.png"
the easy workaround would be to keep the weebly version of the site working, in in the html change the src value of the missing images to something like this http://mjmacoustique.weebly.com/uploads/2/6/8/5/26851316/1434298489.png
So you haveto add the http://YOURSITE.weebly.com before all the src values of your images.
otherwise, just load all the images you need on a blank page of the site on your servers, copy image urls of those and replace the urls in the html with that.
Hope that helps?
The firefox issue might also be solved if all your src values are linked correctly but I cannot be sure about that.
When I tried exporting a site from weebly, some assets were missing from the zip it produced. This resulted in some images failing to appear because they simply weren't there. I don't know how often this happens (or if it happens only for some sites), but weebly's export feature definitely seems to have bugs.
I worked around this by using wget to recursively fetch the content that weebly was hosting. Then I hand-copied the missing assets (and only the missing assets) from the directory structure saved by wget and merged them into the directory structure from weebly's export zip. This is time-consuming, but necessary since the directory structure fetched by wget includes dynamically-generated content (meta data for weebly's editor, assets with decorated names, etc) that you probably don't want in the content you host elsewhere.

How to display local images

Working on a ASP.Net MVC project, I've got a page that allows users to upload their own picture. On the database, it is stored a file path, such as C:\zm\zemanel.jpg
After some research, it seems that browsers can't access the local machine and for that reason, if I have this:
<img src="C:\zm\zemanel.jpg"/>
The image isn't displayed. Note that it is still in development, the path leads to my machine (localhost).
What is the best solution for the user to select an image, have its path stored in the database, and the image to be displayed?
Can the image be included in the project dynamically? Say for example, in the Images folder?
Because images stored in a project folder are displayed normally.
I'm assuming you want to keep that image for future use (saving projects, etc). So sorry if it's overly complex for what you are asking.
I would think that the easiest way to handle this is to just use an input tag. With that tag you can use certain attributes to select a type of file to show in the client dialog, example[Example]:
//accept tag may not work with older versions of IE
//This shows how to open a client side dialog which defaults to an 'image' filetype.
<input type="file" accept="image/*"></input>
As mentioned by others, you would then upload the file, manipulate it (create a thumbnail or whatnot) then insert the image to the page using either a page refresh or javascript to call an ajax request and insert the image.
Any functionality beyond that you'll probably need a Java applet or custom control, which to me seems like overkill.
Try
<img src="file://c:\zm\zemanel.jpg" />