I am serving an HTML file using Azure Functions. However, I am unable to link to css files and reference js scripts within the directory, resulting in an error, i.e. HttpTrigger1:19 GET http://localhost:7071/api/js/jquery.min.js net::ERR_ABORTED 404 (Not Found)
The path to the js and css files seem to be correct. How to prevent this error from occurring? The directory as well as the index.html and index.js can be found in the following.
Directory
HttpTrigger1
│ function.json
│ image.jpg
│ index.html
│ index.js
│ sample.dat
|
├───css
│ bootstrap.min.css
│ jquery.Jcrop.min.css
│
└───js
bootstrap.min.js
form-image-crop.js
jquery.color.js
jquery.Jcrop.min.js
jquery.min.js
index.js
var fs = require('fs');
module.exports = function (context, req) {
var filepath = __dirname + '/index.html'
fs.readFile(filepath, 'utf8', function (err, content) {
if (err) {
context.log.error(err);
context.done(err);
}
//context.log(result.name);
context.res = {
status: 200,
headers:
{
'Content-Type': 'text/html'
},
body: content
};
context.done();
});
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>hello world</title>
<!-- <link rel="stylesheet" href="https://unpkg.com/jcrop/dist/jcrop.css"> -->
<link href="./css/jquery.Jcrop.min.css" rel="stylesheet">
<link href="./css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello world!</h1>
<div id="cordCon">
X: <input name="x"><br />
Y: <input name="y"><br />
W: <input name="w"><br />
H: <input name="h">
</div>
<img src="https://lh3.googleusercontent.com/-EMgI2OzK2E0/T2xktULgfMI/AAAAAAAAAQE/WSQU5IR_mdQ/s443/bipolar-nature-ipad-wallpapers.jpg" id="target">
<script src="./js/jquery.min.js" type="text/javascript"></script>
<script src="./js/jquery.Jcrop.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<!-- <script src="https://unpkg.com/jcrop"></script> -->
<script type="text/javascript">
$(document).ready(function () {
$.Jcrop('#target', {
/*setSelect: [400, 200, 50, 50], */
aspectRatio: 16 / 8,
onSelect: showCords,
onChange: showCords
}/*, function(){
jcrop_api = this;
}*/);
});//end document ready fn
function showCords(c){
console.log(c);
$('input[name="x"]').val(c.x);
$('input[name="y"]').val(c.y);
$('input[name="w"]').val(c.w);
$('input[name="h"]').val(c.h);
}
</script>
</body>
</html>
It seems the
jsfolder is underHttpTrigger1, so when requesthttp://localhost:7071/api/js/jquery.min.js, it shows 404.You should use
http://localhost:7071/api/HttpTrigger1/js/jquery.min.jsor you can also change the lever of the folderjs(move it to same level withHttpTrigger1).