I can't for the life of me figure out why my jpg image isn't rendering on my local computer. I'm writing a simple web app using AngularJS.
I have the images in an "img" folder within the same directory as the home.html file.
Could it be something wrong with the picture? I'm able to open it and it looks renders fine. I don't see any errors in the console either, just a broken image. Maybe it's the way I'm using bootstrap or angular? I'm relatively new to both.
home.html code:
<!DOCTYPE html>
<html data-ng-app="MainApp">
<head>
<title>FedCup 5k</title>
<!--angular uses this base element which path to use when it gets any front end resource- this is the root b/c of "/"-->
<base href='/'>
<link rel="stylesheet" type="text/css" href="src/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="lib/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<div class='container'>
<div class='page-header'>
<h1>FedCup 5k</h1>
<div class="row">
<div class="col-sm-12">
<img src="img/test.jpg"/>
</div>
</div>
</div>
<!--the place holder to render our view dependent on the route-->
<div class="row">
<div class="col-sm-12" data-ng-view>
</div>
</div>
</div>
<script type='text/javascript' src="lib/jquery/dist/jquery.min.js"></script>
<script type="text/css" src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="lib/angular/angular.min.js"></script>
<script type="text/javascript" src="lib/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="lib/angular-resource/angular-resource.min.js"></script>
<script type="text/javascript" src="src/app.js"></script>
<script type="text/javascript" src="src/controller.js"></script>
<script type="text/javascript" src="src/factories.js"></script>
<script type="text/javascript" src="src/filter.js"></script>
</body>
</html>
Thanks so much for your help! I'm hoping it's just something stupid I'm overlooking because I've been staring at this for so long and it looks like it should be easy.
You have to access the folder in your local directory where the images are placed
through slashes.i.e if you have folder img then you have to access it in html via
<img src="/img/test.jpg"/>
Sometimes src not work with angular. Use data-ng-src instead.
Related
I am experimenting with bootstrap css but it just isn't loading on my browser, I've even published the page on my server, It doesn't even render the css styles. Now other example pages load fine on my browser. Just the ones I download locally are giving me an error.
Here's what I've tried out so far:
Validated the HTML to see if I'm making some sort of syntax error but thats not the case. It came clean as a whistle.
Downloaded the bootstrap.css and locally referenced it in the html just in case it was something with my server fetching the file but that didn't worked either.
Lastly, I thought that this might had something to do with my text editor's text encoding or perhaps the end-of-line character incompatibility so I went to codeply.com and executed the damn thing in their online editor and good lord, it didn't worked there.
To clarify further, this is how the page is supposed to look like
against how It does look like
I can see that the css styles are partially applied as the page is not showing default html fonts and styles. I even tried changing permissions of the index.html file to 777 in case that was causing trouble but all in vain so far.
Here's a link to my raw html in codeply.com
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" />
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class='site-wrapper'>
<div class='site-wrapper-inner'>
<div class='cover-container'>
<div class='masthead clearfix'>
<div class='inner'>
<h3 class='masthead-brand'> NileSoft </h3>
<nav>
<ul class='nav masthead-nav'>
<li>Our Clients</li>
<li>Our Services</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="inner cover">
<h1 class="cover-heading">Cover your page.</h1>
<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text and add your own fullscreen background photo to make it your own.</p>
<p class="lead">
Learn more
</p>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.main.js"></script>
</body>
</html>
Might try writing the script tag such as this:
<script src="./js/bootstrap.main.js"></script>
Also, the same for the link tags which includes your bootstrap file locally:
<link rel="stylesheet" href="./css/bootstrap.min.css">
Also, the preferred order for CSS and JS files are as follows:
<html>
<head>
<!-- Bootstrap stylesheet -->
<link rel="stylesheet" href="./css/bootstrap.css" />
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
...
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<!-- Bootstrap JS File -->
<script src="./js/bootstrap.min.js"></script>
<!-- Custom JS File -->
<script src="./js/custom.js"></script>
</body>
</html>
Script imported at the bottom has a http, it might have got blocked by your browser. Also writing <script src="js/bootstrap.main.js"></script> might not work in codeply. Also, try importing other js files after standard libraries like jquery.
To get Bootstrap into your page, simply paste the code below into the <head> section of your template.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
im trying to build a simple app in intel xdk. I've been trying to navigate within page with anchor jumping. this is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="jquery.mobile-1.4.5.css" type="text/css" />
<link rel="stylesheet" href="css/mycs1.css" type="text/css" />
<script src="jquery-1.12.0.js"></script>
<script src="jquery.mobile-1.4.5.js"></script>
<script src="cordova.js"></script>
</head>
<body>
<div data-role="page" name="pageone" id="pageone">
<h1>page1</h1>
Go to Page two
</div>
<div data-role="page" name="pagetwo" id="pagetwo">
<h1>page2</h1>
Go to Page one
</div>
</body>
</html>
it works well when i open it with any browser but when i run it through intel xdk it doesnt. What is the problem and how can i fix it?
I am building a huge one-page site, so I wanted to keep my code clean. I decided to part it into several HTML files and include them in one main index.html. So I wrote a snippet of code in index.html and everything worked fine. However, as I tried to include this snippet from another file, my web page did not appear properly.
Here is the snippet I wrote:
<div class="hidden-sm hidden-xs" id="containerStart">
<div id="left" class="start">
<img src="../pics/svg/Logo%20links.svg" class="logoStart hidden img-responsive" id="logoLeft">
</div>
<div id="right" class="start">
<img src="../pics/svg/Logo%20rechts.svg" class="logoStart hidden img-responsive" id="logoRight">
</div>
<div id="captions">
<h3 class="hidden" id="mivalStart">Mival</h3>
<h5 class="hidden" id="mivalMotto">Innovative Vertriebskonzepte</h5>
</div>
</div>
Here is my index.html:
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no">
<!--Bootstrap css-->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<!--Start animation css-->
<link rel="stylesheet" href="../css/start.css">
<link rel="stylesheet" href="../css/letterFx.css">
<title>Mival</title>
</head>
<body ng-app>
<!--Intro-->
<div ng-include src="'intro.html'"></div>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/jquery-letterfx.js"></script>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript" src="../js/start.js"></script>
</body>
</html>
Maybe you know any solutions for my problem?
Currently I downloaded some CSS/JS files to make my check-boxes pretty (link found at end) and included them in my project. I am looking at his example code for making a check-box button, which is found under his example heading "Button Style". The colors seem to work great but only half of the checkbox is present (top half). I can't seem to figure out why the whole checkbox isn't displaying, but his example is working just fine.
Can someone help me figure out how to get his example working, so I can get a checkbox that toggles from red to green? completely new to bootstrap and help would be appreciated!
Link: http://montrezorro.github.io/bootstrap-checkbox/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-checkbox.css" rel="stylesheet">
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-checkbox.js"></script>
</head>
<body>
<div class="bs-example">
<form class="form-horizontal">
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<div class="checkbox">
<label><input type="checkbox" class = "style3"> Remember me</label>
</div>
</div>
</div>
<script>
$('input[type="checkbox"].style3').checkbox({
buttonStyle: 'btn-danger',
buttonStyleChecked: 'btn-success',
checkedClass: 'icon-check',
uncheckedClass: 'icon-check-empty'
});
</script>
</form>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Edit: Sorry, I don't know how to get the files I downloaded off of the website I posted above on Jsfiddle. I am slapping code together. Obviously you will need to download the code off the website since I imported this. If anyone can tell me how to use jsfiddle while integrating new files, that would be great.
I am working on web project where i am working on angular js to display images and if i click an image it will zoomed. I have created one sample application its working fine but when i started to create one sample application it gives warning for its internal tags.
My Html file where it gives warnings(for ng-app,ng-controller,ng-src,ng-repeat) ..
<!DOCTYPE html>
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- <script src="http://code.angular.org/angular-1.0.0rc4.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="${pageContext.request.contextPath}/js/underscore-min.js"></script>
<link rel="stylesheet"
href="${pageContext.request.contextPath}/css/bootstrap.min.css" />
<script src="${pageContext.request.contextPath}/css/album.css"></script>
<title>Angular album</title>
</head>
<body>
jsp
<div ng-controller="AlbumCtrl">
<div id="albumImage">
<img ng-src="{{currentImage.image}}" alt="{{currentImage.description}}">
</div>
<div id = "thumbWrapper">
<ul id="thumbList">
<li ng-repeat ="image in images" ng-click="setCurrentImage(image)">
<img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
</li>
</ul>
</div>
</div>
</body>
</html>
Seems that your problem is here:
<div ng-controller="AlbumCtrl">
I don't see where this controller is defined. It's possible you got your file extension wrong, and that's why:
<script src="${pageContext.request.contextPath}/css/album.css"></script>
<!-- I would have expected to see .js, not .css, in the path above -->