I have implemented image upload feature but I am facing issue with its path configuration.
I want to store the uploaded the images outside of webapp root directory because every time I un-deploy the application, it deletes the images within the application.
Now, I can store the the uploaded file by getting the path from property file [say C:\images] but when I use that path in it doesn't show the file in web page.
Can you please let me know how to get the absolute path in img src tag.
For security reasons, you can't reference files outside of the webapp root. You're going to need to use virtual directories. These will map outside paths into accessible URLs so c:\images will be accessible as myapp.com/myapp/images/
This sort of thing is specific to the application server you are running, so you'll need to check the documentation for your system to make this work.
Related
image is not showing in my application after uploading but it showing if i made any changes in angular application.
Error in console
but there is file in respective location but it didn't show until any change in angular application
Basically in angular you can load dynamic image by this way.
<img [src]="yourImagePath" />
Path should be like this.
assets/posts/image.png
First try to print image name in for loop and check path is correct or not.
Second thing I suggest you to use ng-template feature of angular. This is the one of the most powerful feature of angular. This is mostly used to show Or load dynamic content in web page.
Note: Make sure that space should not exist in image path.
If sill you are not able to load or access your image then you can try this also.
1) You should try to load image from angular's app path instead if assets path.
[src]="app/path/assets/posts/image.png" // Make path as per your structure.
2) Another option :
[src]="./assets/posts/image.png">
Update
The thing is, when you are running ng serve that triggered in memory webpack dev server - not a thing you want to run on your server, that is for dev only. This way, until you restarted ng serve, you wont get any changes happend in your assets folder as it is default folder for your static assets configured in .angular-cli.json.
So when you access assets folder dynamic, It's not possible you have to restart the app.
Solution :
I suggest you to use another location to access your dynamic images.
For an instance: You can upload a new images at...
public/images
I am building a website and along the way I used imgur to store the image that i was using in it but I decided to created a folder in my app to store them.
Since I'm not using imgur anymore, i needed to change my path to find the image and that's where the problem appeared, I can't find the image.
The structure looks like that:
webapp_folder
|_node_modules
|_image_folder
|_public_folder
|_views
|_partials_folder
|_main.js
|_app.js
|_package.json
In main.js, I use one of the image in image_folder and the path to the image looks like: src="../image_folder/image.png" but that's where I got the 404 error.
I've tried putting the image in the same folder that the main.js so the path would look like src="image.png" but still getting this error.
So i guess it's not a path's problem but I've no idea what it could be.
Hope I could make it clear!
I'm using node.js and express.
You need to make routes to the assets.
app.use(express.static('image_folder')
Whenever you are using an asset there are multiple ways to include that in your project.
In your case, whenever an image is loaded it is actually loaded by the browser using network calls from client side. Not server side. So client side code doesn't have access to internal paths (for ex: /usr/local/ kinda paths). Whenever they fetch something it is relative to the host, maybe in your case localhost so, fetching /image.png is fetching localhost/image.png but your app doesn't have route to those image files. So, we make routes for all the assets which is done by express.static
Another way is you can actually require the image. So, bundlers (with proper config) make some public folder and put the assets to that folder. react/vue apps by default do this.
Lets say I have a directory of .html files, accessible by the app server, and I want to display to users so they can access them with their browser:
/import/tps-reports/index.html
/import/tps-reports/report1.html
/import/tps-reports/report2.html
Is there a way I can expose the tps-reports directory to do this so that a user can access them via:
http://www.example.com/tps-reports/index.html
http://www.example.com/tps-reports/report1.html
Also, keep in mind that index.html may reference the other pages:
Report 1
So those links need to work as well.
Here is a possible answer:
http://docs.oracle.com/cd/E19776-01/820-4496/geqpl/index.html
You can set up an alternate doc root so that certain URI patterns point to different paths.
The examples are only really showing relative paths though...I wonder if its "ok" to use this to reference local file systems.
i'm new in using hosting, i have a question about a FTP, why if i upload something (for example a image) to my server i cannot see it from the browser using the directory for example (http://www.mywebsite.com/public_html/images/backgrounds/background.png) if i use that address i get a fil with a "?" sign instead of the image. the only way to see the image is changing http by ftp for example,(ftp://ftp.mywebsite.com/public_html/images/backgrounds/background.png)
please how to find the files with http instead of ftp, to be able to use it in my web page using html
thank you
Typically, the publichtml folder is the root of your domain, which is to say that http://www.mywebsite.com/ points to your/relative/path/to/publichtml/
Using your example of putting a file at /publichtml/images/backgrounds/background.png would mean it should be accessible at http://www.mywebsite.com/images/backgrounds/background.png
Similarly, if you put filename.html in the /publichtml/ folder of your server, you should be able to access it at http://www.mywebsite.com/filename.html - If you put it in a subfolder of /publichtml/, say, at publichtml/example/, it should be accessible at http://www.mywebsite.com/example/filename.html
This can very from one server to another, but in most situations, this is common practice.
Edit: broken formatting.
I have a problem retrieving a flash file that is outside of the root directory.
What I have are 5 websites that use the same flash file, so I created a folder outside (one level up) of the 5 domains on my server. In the folder I have my flash file.
I am using the relative path below, but no worky worky.
"../resources/helpful_info.swf"
If I move the resource file and website files under a single domain it works fine. So, it seems I have a problem when I use a relative path and jump outside the domain to search for a file.
I don't want to use absolute path because files and paths change too much here.
Any ideas? I need it to worky worky
THANKS!
Your path does not make sense.
Relative paths are interpreted by the client, and they're used to compose a path within your domain.
You cannot use a relative path to tell the client to fetch a file outside the domain.
You also cannot reference outside your site at server side. Think security.
I see 2 fast solutions:
1) Create a new domain put the flash there. Other security problems like cross site scripting might occur.
2) Make a copy of the flash for all 5 domains. It is it update often create a script to copy it to every domain.