Image Uploading But its Different from All other in Angular
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
angular6
edited Nov 14 '18 at 9:26
Narendra Mongiya
1,530719
asked Nov 14 '18 at 4:54
MaheshMahesh
94
add a comment |
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
angular6
edited Nov 14 '18 at 9:26
Narendra Mongiya
1,530719
asked Nov 14 '18 at 4:54
MaheshMahesh
94
add a comment |
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
angular6
edited Nov 14 '18 at 9:26
Narendra Mongiya
1,530719
asked Nov 14 '18 at 4:54
MaheshMahesh
94
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
angular6
angular6
edited Nov 14 '18 at 9:26
Narendra Mongiya
1,530719
asked Nov 14 '18 at 4:54
MaheshMahesh
94
edited Nov 14 '18 at 9:26
Narendra Mongiya
1,530719
asked Nov 14 '18 at 4:54
MaheshMahesh
94
edited Nov 14 '18 at 9:26
Narendra Mongiya
1,530719
edited Nov 14 '18 at 9:26
Narendra Mongiya
1,530719
edited Nov 14 '18 at 9:26
Narendra Mongiya
1,530719
1,530719
asked Nov 14 '18 at 4:54
MaheshMahesh
94
asked Nov 14 '18 at 4:54
MaheshMahesh
94
asked Nov 14 '18 at 4:54
MaheshMahesh
94
94
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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
answered Nov 14 '18 at 5:00
Sachin ShahSachin Shah
1,6241415
but it showing after restarting the Angular server
– Mahesh
Nov 14 '18 at 14:55
So when it works fine ?
– Sachin Shah
Nov 14 '18 at 14:58
After restarting the angular server it works fine. and one more point "/assets/posts" are belongs to Angular project folder.
– Mahesh
Nov 14 '18 at 15:19
Can you show how you read image ?
– Sachin Shah
Nov 14 '18 at 16:02
<li *ngFor='let post of posts; let i = index'> <img [src]="post.location" width="500px" height="500px"> <div class="likesandcomments"> <p (click)="doLike(post._id, i)">Like <span>{{post.noOflikes}}</span></p> <p>Comment</p> <p>Share</p> </div> </li>
– Mahesh
Nov 16 '18 at 15:24
|
show 7 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53293392%2fimage-uploading-but-its-different-from-all-other-in-angular%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
answered Nov 14 '18 at 5:00
Sachin ShahSachin Shah
1,6241415
but it showing after restarting the Angular server
– Mahesh
Nov 14 '18 at 14:55
So when it works fine ?
– Sachin Shah
Nov 14 '18 at 14:58
After restarting the angular server it works fine. and one more point "/assets/posts" are belongs to Angular project folder.
– Mahesh
Nov 14 '18 at 15:19
Can you show how you read image ?
– Sachin Shah
Nov 14 '18 at 16:02
<li *ngFor='let post of posts; let i = index'> <img [src]="post.location" width="500px" height="500px"> <div class="likesandcomments"> <p (click)="doLike(post._id, i)">Like <span>{{post.noOflikes}}</span></p> <p>Comment</p> <p>Share</p> </div> </li>
– Mahesh
Nov 16 '18 at 15:24
|
show 7 more comments
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
answered Nov 14 '18 at 5:00
Sachin ShahSachin Shah
1,6241415
but it showing after restarting the Angular server
– Mahesh
Nov 14 '18 at 14:55
So when it works fine ?
– Sachin Shah
Nov 14 '18 at 14:58
After restarting the angular server it works fine. and one more point "/assets/posts" are belongs to Angular project folder.
– Mahesh
Nov 14 '18 at 15:19
Can you show how you read image ?
– Sachin Shah
Nov 14 '18 at 16:02
<li *ngFor='let post of posts; let i = index'> <img [src]="post.location" width="500px" height="500px"> <div class="likesandcomments"> <p (click)="doLike(post._id, i)">Like <span>{{post.noOflikes}}</span></p> <p>Comment</p> <p>Share</p> </div> </li>
– Mahesh
Nov 16 '18 at 15:24
|
show 7 more comments
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
answered Nov 14 '18 at 5:00
Sachin ShahSachin Shah
1,6241415
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
answered Nov 14 '18 at 5:00
Sachin ShahSachin Shah
1,6241415
edited Nov 20 '18 at 5:04
answered Nov 14 '18 at 5:00
Sachin ShahSachin Shah
1,6241415
answered Nov 14 '18 at 5:00
Sachin ShahSachin Shah
1,6241415
answered Nov 14 '18 at 5:00
Sachin ShahSachin Shah
1,6241415
1,6241415
but it showing after restarting the Angular server
– Mahesh
Nov 14 '18 at 14:55
So when it works fine ?
– Sachin Shah
Nov 14 '18 at 14:58
After restarting the angular server it works fine. and one more point "/assets/posts" are belongs to Angular project folder.
– Mahesh
Nov 14 '18 at 15:19
Can you show how you read image ?
– Sachin Shah
Nov 14 '18 at 16:02
<li *ngFor='let post of posts; let i = index'> <img [src]="post.location" width="500px" height="500px"> <div class="likesandcomments"> <p (click)="doLike(post._id, i)">Like <span>{{post.noOflikes}}</span></p> <p>Comment</p> <p>Share</p> </div> </li>
– Mahesh
Nov 16 '18 at 15:24
|
show 7 more comments
but it showing after restarting the Angular server
– Mahesh
Nov 14 '18 at 14:55
So when it works fine ?
– Sachin Shah
Nov 14 '18 at 14:58
After restarting the angular server it works fine. and one more point "/assets/posts" are belongs to Angular project folder.
– Mahesh
Nov 14 '18 at 15:19
Can you show how you read image ?
– Sachin Shah
Nov 14 '18 at 16:02
<li *ngFor='let post of posts; let i = index'> <img [src]="post.location" width="500px" height="500px"> <div class="likesandcomments"> <p (click)="doLike(post._id, i)">Like <span>{{post.noOflikes}}</span></p> <p>Comment</p> <p>Share</p> </div> </li>
– Mahesh
Nov 16 '18 at 15:24
but it showing after restarting the Angular server
– Mahesh
Nov 14 '18 at 14:55
but it showing after restarting the Angular server
– Mahesh
Nov 14 '18 at 14:55
So when it works fine ?
– Sachin Shah
Nov 14 '18 at 14:58
So when it works fine ?
– Sachin Shah
Nov 14 '18 at 14:58
After restarting the angular server it works fine. and one more point "/assets/posts" are belongs to Angular project folder.
– Mahesh
Nov 14 '18 at 15:19
After restarting the angular server it works fine. and one more point "/assets/posts" are belongs to Angular project folder.
– Mahesh
Nov 14 '18 at 15:19
Can you show how you read image ?
– Sachin Shah
Nov 14 '18 at 16:02
Can you show how you read image ?
– Sachin Shah
Nov 14 '18 at 16:02
<li *ngFor='let post of posts; let i = index'> <img [src]="post.location" width="500px" height="500px"> <div class="likesandcomments"> <p (click)="doLike(post._id, i)">Like <span>{{post.noOflikes}}</span></p> <p>Comment</p> <p>Share</p> </div> </li>
– Mahesh
Nov 16 '18 at 15:24
<li *ngFor='let post of posts; let i = index'> <img [src]="post.location" width="500px" height="500px"> <div class="likesandcomments"> <p (click)="doLike(post._id, i)">Like <span>{{post.noOflikes}}</span></p> <p>Comment</p> <p>Share</p> </div> </li>
– Mahesh
Nov 16 '18 at 15:24
|
show 7 more comments
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53293392%2fimage-uploading-but-its-different-from-all-other-in-angular%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
