Quantcast
Channel: ASP.NET Core
Viewing all articles
Browse latest Browse all 9386

Does Angular2 can directly access the images under app folder ?

$
0
0
<div class="vote">
0
down votefavorite<div class="favoritecount"></div> </div>
<div> <div class="post-text" itemprop="text">

I am using a jquery theme in my ASP.NET MVC core Application (angularjs2). Some sections are properly working but some of the plugins are not working.

Like own-carousel is not getting the images and displaying anything.

I have placed the images folder under angular app folder as well under root project directory but it couldn't work in any case.

i am placing some code sample here:

please see and suggest.

index.component.html

<div id="hero"><div id="owl-main" class="owl-carousel owl-inner-nav owl-ui-sm"><div class="item" style="background-image:  url('app/assets/images/sliders/slider01.jpg');"><div class="container-fluid"><div class="caption vertical-center text-left"><div class="big-text fadeInDown-1">
            Save up to a<span class="big"><span class="sign">$</span>400</span></div><div class="excerpt fadeInDown-2">
            on selected laptops<br> & desktop pcs or<br> smartphones</div><div class="small fadeInDown-2">
            terms and conditions apply</div><div class="button-holder fadeInDown-3"><a href="single-product.html" class="big le-button ">shop now</a></div></div><!-- /.caption --></div><!-- /.container-fluid --></div><!-- /.item --><div class="item" style="background-image: url('../assets/images/sliders/slider01.jpg');"><div class="container-fluid"><div class="caption vertical-center text-left"><div class="big-text fadeInDown-1">
            Want a<span class="big"><span class="sign">$</span>200</span>Discount?</div><div class="excerpt fadeInDown-2">
            on selected <br>desktop pcs<br></div><div class="small fadeInDown-2">
            terms and conditions apply</div><div class="button-holder fadeInDown-3"><a href="single-product.html" class="big le-button ">shop now</a></div></div><!-- /.caption --></div><!-- /.container-fluid --></div><!-- /.item --></div><!-- /.owl-carousel --></div>

Images folder is currently available under app folder in assets folder.

and this is parent/master layout which have that plugins

<!DOCTYPE html><html><headlang="en"><basehref="/"><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkhref="node_modules/bootstrap/dist/css/bootstrap.css"rel="stylesheet"/><linkhref="app/app.component.css"rel="stylesheet"/><linkhref="node_modules/assets/css/style.css"rel="stylesheet"/><linkrel="stylesheet"href="node_modules/assets/css/style.css"><linkrel="stylesheet"href="node_modules/assets/css/colors/green.css"><linkrel="stylesheet"href="node_modules/assets/css/owl.carousel.css"><linkrel="stylesheet"href="node_modules/assets/css/owl.transitions.css"><linkrel="stylesheet"href="node_modules/assets/css/animate.min.css"><!-- Fonts --><linkhref='//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800'rel='stylesheet'type='text/css'><!-- Icons/Glyphs --><linkrel="stylesheet"href="node_modules/Cartjs/assets/css/font-awesome.min.css"><!-- Favicon --><linkrel="shortcut icon"href="node_modules/Cartjs/assets/images/favicon.ico"><!-- Polyfill(s) for older browsers --><scriptsrc="node_modules/client/shim.min.js"></script><scriptsrc="node_modules/zone.js/dist/zone.js"></script><scriptsrc="node_modules/reflect-metadata/Reflect.js"></script><scriptsrc="node_modules/systemjs/dist/system.src.js"></script><!-- Configure SystemJS --><scriptsrc="systemjs.config.js"></script><scriptsrc="node_modules/assets/js/jquery.js"></script><scriptsrc="node_modules/assets/js/jquery-migrate-1.2.1.js"></script><scriptsrc="node_modules/bootstrap/dist/js/bootstrap.min.js"></script><scriptsrc="//maps.google.com/maps/api/js?key=AIzaSyDDZJO4F0d17RnFoi1F2qtw4wn6Wcaqxao&sensor=false&amp;language=en"></script><scriptsrc="node_modules/assets/js/gmap3.min.js"></script><scriptsrc="node_modules/assets/js/bootstrap-hover-dropdown.min.js"></script><scriptsrc="node_modules/assets/js/owl.carousel.min.js"></script><scriptsrc="node_modules/assets/js/css_browser_selector.min.js"></script><scriptsrc="node_modules/assets/js/echo.min.js"></script><scriptsrc="node_modules/assets/js/jquery.easing-1.3.min.js"></script><scriptsrc="node_modules/assets/js/bootstrap-slider.min.js"></script><scriptsrc="node_modules/assets/js/jquery.raty.min.js"></script><scriptsrc="node_modules/assets/js/jquery.prettyPhoto.min.js"></script><scriptsrc="node_modules/assets/js/jquery.customSelect.min.js"></script><scriptsrc="node_modules/assets/js/wow.min.js"></script><scriptsrc="node_modules/assets/js/buttons.js"></script><scriptsrc="node_modules/assets/js/scripts.js"></script><!-- End Customizable plugins For Sale Cart Portal  --><script>System.import('app').catch(function(err){ console.error(err);});</script></head><body><pm-app>Loading App...</pm-app></body></html>

systemjs.config.js

(function(global){System.config({
    paths:{// paths serve as alias'npm:':'node_modules/'},// map tells the System loader where to look for things
    map:{// our app is within the app folder
      app:'app',// angular bundles'@angular/core':'npm:@angular/core/bundles/core.umd.js','@angular/common':'npm:@angular/common/bundles/common.umd.js','@angular/compiler':'npm:@angular/compiler/bundles/compiler.umd.js','@angular/platform-browser':'npm:@angular/platform-browser/bundles/platform-browser.umd.js','@angular/platform-browser-dynamic':'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js','@angular/http':'npm:@angular/http/bundles/http.umd.js','@angular/router':'npm:@angular/router/bundles/router.umd.js','@angular/forms':'npm:@angular/forms/bundles/forms.umd.js',// other libraries'rxjs':'npm:rxjs','angular-in-memory-web-api':'npm:angular-in-memory-web-api',},// packages tells the System loader how to load when no filename and/or no extension
    packages:{
      app:{
        main:'./main.js',
        defaultExtension:'js'},
      rxjs:{
        defaultExtension:'js'},'angular-in-memory-web-api':{
        main:'./index.js',
        defaultExtension:'js'}}});})(this);
</div></div>

Viewing all articles
Browse latest Browse all 9386

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>