Can Angular serve images outside assets folder
Am building a project on Angular and this project will have lots of images as part the design. Am wondering if it is possible to keep images used by each component within the component instead of having to fetch each image from the assets folder.
I want to know if it is possible to configure Angular to house and serve images used by a component within that component.
See picture for clarification:
angular
edited Nov 22 at 13:19
SiddAjmera
12.4k31137
asked Nov 22 at 13:19
Alex Imenwo
392
add a comment |
Am building a project on Angular and this project will have lots of images as part the design. Am wondering if it is possible to keep images used by each component within the component instead of having to fetch each image from the assets folder.
I want to know if it is possible to configure Angular to house and serve images used by a component within that component.
See picture for clarification:
angular
edited Nov 22 at 13:19
SiddAjmera
12.4k31137
asked Nov 22 at 13:19
Alex Imenwo
392
add a comment |
Am building a project on Angular and this project will have lots of images as part the design. Am wondering if it is possible to keep images used by each component within the component instead of having to fetch each image from the assets folder.
I want to know if it is possible to configure Angular to house and serve images used by a component within that component.
See picture for clarification:
angular
edited Nov 22 at 13:19
SiddAjmera
12.4k31137
asked Nov 22 at 13:19
Alex Imenwo
392
Am building a project on Angular and this project will have lots of images as part the design. Am wondering if it is possible to keep images used by each component within the component instead of having to fetch each image from the assets folder.
I want to know if it is possible to configure Angular to house and serve images used by a component within that component.
See picture for clarification:
angular
angular
edited Nov 22 at 13:19
SiddAjmera
12.4k31137
asked Nov 22 at 13:19
Alex Imenwo
392
edited Nov 22 at 13:19
SiddAjmera
12.4k31137
asked Nov 22 at 13:19
Alex Imenwo
392
edited Nov 22 at 13:19
SiddAjmera
12.4k31137
edited Nov 22 at 13:19
SiddAjmera
12.4k31137
edited Nov 22 at 13:19
SiddAjmera
12.4k31137
12.4k31137
asked Nov 22 at 13:19
Alex Imenwo
392
asked Nov 22 at 13:19
Alex Imenwo
392
asked Nov 22 at 13:19
Alex Imenwo
392
392
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
Assets Contains image files and other asset files to be copied as-is when you build your application.
But Yes, you can!
But for this you need to manually require each image in your component file and use dyanmically in template like this -
declare var require: any
myImage = require('./myImage.png');
<img [src]="myImage" />
As by default Angular CLI has a configuration for static data such as Images/Fonts/Css files etc from assets folder.
But if you want to use some static data outside from there you need to require like above mentioned.
PS: Not sure whether angular takes all static data at the time of build such as image at the component level. But should work in ng serve
answered Nov 22 at 13:31
Pardeep Jain
37.4k16101136
I don't think require with image will work in Angular.
– Suresh Kumar Ariya
Nov 22 at 14:01
@SureshKumarAriya I have tried this on my local project before posting it as answer
– Pardeep Jain
Nov 22 at 14:50
@PardeepJain I tried it but couldn't get it to work on mine...any more help will go a long way pls.
– Alex Imenwo
Nov 22 at 15:31
Tried in stackblitz its not worked.
– Suresh Kumar Ariya
Nov 22 at 16:27
@SureshKumarAriya Not sure about stackblitz, But Tested on local project on my machine, Have you tried there?
– Pardeep Jain
Nov 23 at 18:35
add a comment |
Yes. You can put the images in the component folder and access the same from component file. Just you have to give the correct path of the image file in component or HTML file
Example: In component file directly access the file by the name without any folder path fileName.jpeg
answered Nov 22 at 13:26
Prithivi Raj
1,7751924
3
Have you tried this? I am not sure because by default in angular cli path is set for assets folder for static data say images, some css files fonts etc
– Pardeep Jain
Nov 22 at 13:28
add a comment |
many thanks @PardeepJain I have been able to get it to work following your direction.
But this is what I did in case of others:
declare var require: any;
declare var img: any;
export class IndexNavComponents {
enter code hereimg= require('./myImage.png');
}
answered Nov 28 at 16:03
Alex Imenwo
392
add a comment |
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%2f53431905%2fcan-angular-serve-images-outside-assets-folder%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
Assets Contains image files and other asset files to be copied as-is when you build your application.
But Yes, you can!
But for this you need to manually require each image in your component file and use dyanmically in template like this -
declare var require: any
myImage = require('./myImage.png');
<img [src]="myImage" />
As by default Angular CLI has a configuration for static data such as Images/Fonts/Css files etc from assets folder.
But if you want to use some static data outside from there you need to require like above mentioned.
PS: Not sure whether angular takes all static data at the time of build such as image at the component level. But should work in ng serve
answered Nov 22 at 13:31
Pardeep Jain
37.4k16101136
I don't think require with image will work in Angular.
– Suresh Kumar Ariya
Nov 22 at 14:01
@SureshKumarAriya I have tried this on my local project before posting it as answer
– Pardeep Jain
Nov 22 at 14:50
@PardeepJain I tried it but couldn't get it to work on mine...any more help will go a long way pls.
– Alex Imenwo
Nov 22 at 15:31
Tried in stackblitz its not worked.
– Suresh Kumar Ariya
Nov 22 at 16:27
@SureshKumarAriya Not sure about stackblitz, But Tested on local project on my machine, Have you tried there?
– Pardeep Jain
Nov 23 at 18:35
add a comment |
Assets Contains image files and other asset files to be copied as-is when you build your application.
But Yes, you can!
But for this you need to manually require each image in your component file and use dyanmically in template like this -
declare var require: any
myImage = require('./myImage.png');
<img [src]="myImage" />
As by default Angular CLI has a configuration for static data such as Images/Fonts/Css files etc from assets folder.
But if you want to use some static data outside from there you need to require like above mentioned.
PS: Not sure whether angular takes all static data at the time of build such as image at the component level. But should work in ng serve
answered Nov 22 at 13:31
Pardeep Jain
37.4k16101136
I don't think require with image will work in Angular.
– Suresh Kumar Ariya
Nov 22 at 14:01
@SureshKumarAriya I have tried this on my local project before posting it as answer
– Pardeep Jain
Nov 22 at 14:50
@PardeepJain I tried it but couldn't get it to work on mine...any more help will go a long way pls.
– Alex Imenwo
Nov 22 at 15:31
Tried in stackblitz its not worked.
– Suresh Kumar Ariya
Nov 22 at 16:27
@SureshKumarAriya Not sure about stackblitz, But Tested on local project on my machine, Have you tried there?
– Pardeep Jain
Nov 23 at 18:35
add a comment |
Assets Contains image files and other asset files to be copied as-is when you build your application.
But Yes, you can!
But for this you need to manually require each image in your component file and use dyanmically in template like this -
declare var require: any
myImage = require('./myImage.png');
<img [src]="myImage" />
As by default Angular CLI has a configuration for static data such as Images/Fonts/Css files etc from assets folder.
But if you want to use some static data outside from there you need to require like above mentioned.
PS: Not sure whether angular takes all static data at the time of build such as image at the component level. But should work in ng serve
answered Nov 22 at 13:31
Pardeep Jain
37.4k16101136
Assets Contains image files and other asset files to be copied as-is when you build your application.
But Yes, you can!
But for this you need to manually require each image in your component file and use dyanmically in template like this -
declare var require: any
myImage = require('./myImage.png');
<img [src]="myImage" />
As by default Angular CLI has a configuration for static data such as Images/Fonts/Css files etc from assets folder.
But if you want to use some static data outside from there you need to require like above mentioned.
PS: Not sure whether angular takes all static data at the time of build such as image at the component level. But should work in ng serve
answered Nov 22 at 13:31
Pardeep Jain
37.4k16101136
edited Nov 22 at 13:36
answered Nov 22 at 13:31
Pardeep Jain
37.4k16101136
answered Nov 22 at 13:31
Pardeep Jain
37.4k16101136
answered Nov 22 at 13:31
Pardeep Jain
37.4k16101136
37.4k16101136
I don't think require with image will work in Angular.
– Suresh Kumar Ariya
Nov 22 at 14:01
@SureshKumarAriya I have tried this on my local project before posting it as answer
– Pardeep Jain
Nov 22 at 14:50
@PardeepJain I tried it but couldn't get it to work on mine...any more help will go a long way pls.
– Alex Imenwo
Nov 22 at 15:31
Tried in stackblitz its not worked.
– Suresh Kumar Ariya
Nov 22 at 16:27
@SureshKumarAriya Not sure about stackblitz, But Tested on local project on my machine, Have you tried there?
– Pardeep Jain
Nov 23 at 18:35
add a comment |
I don't think require with image will work in Angular.
– Suresh Kumar Ariya
Nov 22 at 14:01
@SureshKumarAriya I have tried this on my local project before posting it as answer
– Pardeep Jain
Nov 22 at 14:50
@PardeepJain I tried it but couldn't get it to work on mine...any more help will go a long way pls.
– Alex Imenwo
Nov 22 at 15:31
Tried in stackblitz its not worked.
– Suresh Kumar Ariya
Nov 22 at 16:27
@SureshKumarAriya Not sure about stackblitz, But Tested on local project on my machine, Have you tried there?
– Pardeep Jain
Nov 23 at 18:35
I don't think require with image will work in Angular.
– Suresh Kumar Ariya
Nov 22 at 14:01
I don't think require with image will work in Angular.
– Suresh Kumar Ariya
Nov 22 at 14:01
@SureshKumarAriya I have tried this on my local project before posting it as answer
– Pardeep Jain
Nov 22 at 14:50
@SureshKumarAriya I have tried this on my local project before posting it as answer
– Pardeep Jain
Nov 22 at 14:50
@PardeepJain I tried it but couldn't get it to work on mine...any more help will go a long way pls.
– Alex Imenwo
Nov 22 at 15:31
@PardeepJain I tried it but couldn't get it to work on mine...any more help will go a long way pls.
– Alex Imenwo
Nov 22 at 15:31
Tried in stackblitz its not worked.
– Suresh Kumar Ariya
Nov 22 at 16:27
Tried in stackblitz its not worked.
– Suresh Kumar Ariya
Nov 22 at 16:27
@SureshKumarAriya Not sure about stackblitz, But Tested on local project on my machine, Have you tried there?
– Pardeep Jain
Nov 23 at 18:35
@SureshKumarAriya Not sure about stackblitz, But Tested on local project on my machine, Have you tried there?
– Pardeep Jain
Nov 23 at 18:35
add a comment |
Yes. You can put the images in the component folder and access the same from component file. Just you have to give the correct path of the image file in component or HTML file
Example: In component file directly access the file by the name without any folder path fileName.jpeg
answered Nov 22 at 13:26
Prithivi Raj
1,7751924
3
Have you tried this? I am not sure because by default in angular cli path is set for assets folder for static data say images, some css files fonts etc
– Pardeep Jain
Nov 22 at 13:28
add a comment |
Yes. You can put the images in the component folder and access the same from component file. Just you have to give the correct path of the image file in component or HTML file
Example: In component file directly access the file by the name without any folder path fileName.jpeg
answered Nov 22 at 13:26
Prithivi Raj
1,7751924
3
Have you tried this? I am not sure because by default in angular cli path is set for assets folder for static data say images, some css files fonts etc
– Pardeep Jain
Nov 22 at 13:28
add a comment |
Yes. You can put the images in the component folder and access the same from component file. Just you have to give the correct path of the image file in component or HTML file
Example: In component file directly access the file by the name without any folder path fileName.jpeg
answered Nov 22 at 13:26
Prithivi Raj
1,7751924
Yes. You can put the images in the component folder and access the same from component file. Just you have to give the correct path of the image file in component or HTML file
Example: In component file directly access the file by the name without any folder path fileName.jpeg
answered Nov 22 at 13:26
Prithivi Raj
1,7751924
answered Nov 22 at 13:26
Prithivi Raj
1,7751924
answered Nov 22 at 13:26
Prithivi Raj
1,7751924
answered Nov 22 at 13:26
Prithivi Raj
1,7751924
1,7751924
3
Have you tried this? I am not sure because by default in angular cli path is set for assets folder for static data say images, some css files fonts etc
– Pardeep Jain
Nov 22 at 13:28
add a comment |
3
Have you tried this? I am not sure because by default in angular cli path is set for assets folder for static data say images, some css files fonts etc
– Pardeep Jain
Nov 22 at 13:28
3
3
Have you tried this? I am not sure because by default in angular cli path is set for assets folder for static data say images, some css files fonts etc
– Pardeep Jain
Nov 22 at 13:28
Have you tried this? I am not sure because by default in angular cli path is set for assets folder for static data say images, some css files fonts etc
– Pardeep Jain
Nov 22 at 13:28
add a comment |
many thanks @PardeepJain I have been able to get it to work following your direction.
But this is what I did in case of others:
declare var require: any;
declare var img: any;
export class IndexNavComponents {
enter code hereimg= require('./myImage.png');
}
answered Nov 28 at 16:03
Alex Imenwo
392
add a comment |
many thanks @PardeepJain I have been able to get it to work following your direction.
But this is what I did in case of others:
declare var require: any;
declare var img: any;
export class IndexNavComponents {
enter code hereimg= require('./myImage.png');
}
answered Nov 28 at 16:03
Alex Imenwo
392
add a comment |
many thanks @PardeepJain I have been able to get it to work following your direction.
But this is what I did in case of others:
declare var require: any;
declare var img: any;
export class IndexNavComponents {
enter code hereimg= require('./myImage.png');
}
answered Nov 28 at 16:03
Alex Imenwo
392
many thanks @PardeepJain I have been able to get it to work following your direction.
But this is what I did in case of others:
declare var require: any;
declare var img: any;
export class IndexNavComponents {
enter code hereimg= require('./myImage.png');
}
answered Nov 28 at 16:03
Alex Imenwo
392
answered Nov 28 at 16:03
Alex Imenwo
392
answered Nov 28 at 16:03
Alex Imenwo
392
answered Nov 28 at 16:03
Alex Imenwo
392
392
add a comment |
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53431905%2fcan-angular-serve-images-outside-assets-folder%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
