node.js express static images serving - javascript

I need to include my static images at html page. So I do it like that:
app.use(express.static(path.join(__dirname, 'public')));
And put all my images inside public under '/images' folder.
So then I call it like this:
<img src="images/image_1.jpg"/>
But my path when page loaded looks like:
http://localhost:3000/product/images/image_1.jpg
Why did page url path http://localhost:3000/product/ added before img src?

If you're already at http://localhost:3000/product clicking a link with the href images/image_1.jpg takes you to http://localhost:3000/product/images/image_1.jpg as the URL is relative.
You probably wanted to use absolute paths instead
<img src="/images/image_1.jpg" />

Related

Use base url for image source html/js

Hey i get my html content via json. The image blocks look like:
src=\"/2017/03/test.jpg\" alt=\"test\" width=\"576\" height=\"800\" srcset=\"/2017/03/test.jpg 576w, /2017/03/test-112x155.jpg 112w, /2017/03/test-432x600.jpg 432w\"
The src should look like mywebsite.com/img-src but it looks like localhost/img-src right now...
I tried to replace it via JavaScript but then it looks like: localhost/mywebsite.com/img-src
Does somebody have an idea
Edit: the image is hosted on ONE Website! And it should be shown on every device. Now its 404...
It can be done by including a <base> tag in the <head> tag like this:
<base href="mywebsite.com/path">
For more information reference this webpage: https://www.w3schools.com/tags/tag_base.asp

Serve static files for sub routes inside a Express router

I have everything working for normal routes such as localhost:3000/fees and others.
Screenshot of directory structure
But when subroutes appear it tends to give a problem that is my static files aren't served to pages like localhost:3000/fees/cfees.
How do I serve static files to this subroutes.
I used
app.use(express.static(path.join(__dirname, 'public')));
to load static files
You should use absolute path instead of relative path :
For example, use "/bundle.js" instead of "bundle.js"
And more to make here so in your router:
router.get('/fees/cfees', function(req, res) {
res.render('cfees')
});
for example, if you want to use bootstrap.min.css, which is located in c:\my_project\public\css\bootstrap.min.css in your template file must be something like:
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body>
...
</body>
</html>

gulp.js prepend and append string to src and href attributes after using gulp.useref

I'm running some html files i na template engine and all assets are declared like this:
<link rel="stylesheet" href="$href('libs/bootstrap.min.css')">
<script src="$href('libs/jquery.js')"></script>
When I run $.useref it does move files to the correct folders, but leaves the .html files with the absolute and relative paths that should normally have. Is there a way I can edit $.useref "template" for script and link tags pointing to the right place and prepending/appending $href('') inside the src and href attributes? Is there any other gulp plugin that can do this?
Finally did it with gulp-replace:
gulp.task('templates', function () {
return gulp.src('dist/**/*.html')
.pipe(replace(/src="([^"]*)"/g, 'src="$$href(\'$1\')"'))
.pipe(replace(/href="([^"]*)"/g, 'href="$$href(\'$1\')"'))
.pipe(gulp.dest('dist'));
});

img is not loading when change the image by using javascript

This is my code i can't understand what is wrong with in this.
<html>
<body>
<script type="text/javascript">
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("bulbon")) {
image.src = "C:\Users\ashokch\Desktop\light_bulb_off3.jpg";
} else {
image.src = "C:\Users\ashokch\Desktop\bulbon.png";
}
}
</script>
<img id="myImage" onclick="changeImage()"
src="C:\Users\ashokch\Desktop\light_bulb_off3.jpg" width="100" height="180">
<p>Click the light bulb to turn on/off the light</p>
</body>
</html>
Default image is Displaying when page come in browser but when I click the image changing image is not loading
You aren't using valid file protocols (file:///C:/mydir/index.html) to access the files. As others have said, move them "next" to your html file and just use the file name without a path (e.g. light_bulb_off3.jpg), or change your paths to something valid (e.g. file:///C:/Users/ashokch/Desktop/light_bulb_off3.jpg)
Try this:
<img src="file:///C:/Users/ashokch/Desktop/light_bulb_off3.jpg">
Please notice the file:/// protocol handler. And / (slash) instead off \(backslash).
It is used to show local files in your browser.
But this only works for local files.
If you want the webserver to serve these images, create a folder in your webserver root folder.
Example
/images
And store your images in that folder.
Then point your image src or javascript attribs to the absolute path.
<img src="/images/my-image.jpg">
This will take your current url, strip out the hostname and protocol and append the src.
Example
http://www.example.org/folder/test.html
<img src="{http://www.example.org}/images/my-image.jpg">
<img src="{http://www.example.org/folder/}images/my-image.jpg">
<img src="http://www.some-image-host.com/xyz123.jpg">
Absolute means, with protocol and hostname/path.
Relative means, relative to the root of your current domain (without any path).
Upload your images to a free image hosting website like :-
http://photobucket.com/ or
https://imageshack.com/
Use the new weblinks to the images & check if it works.
"bulbon" ??? What's it ?
Your image path should be relative to your project/code directory instead of the file system. Either copy the images into the project directory or give a relative path. That would solve the issue.

Having trouble loading a javascript (images don't load)

I downloaded a calendar javascript. My working directory is /user. I put the script into /user/js/calendar. In my HTML located at user/, I have...
<script language="JavaScript" src="js/calendar/calendar_us.js"></script>
<link rel="stylesheet" href="js/calendar/calendar.css">
The .js and .css load, and I see the calendar form, but the images under user/js/calendar/img do not load when it's displayed on the browser.
The image reference code in the downloaded javascript is below
<img src="' + this.a_tpl.imgpath + 'next_year.gif" />
this.a_tpl.imgpath is 'img/'. Is there something I need to add or modify in my HTML or in the .js file to make correct relative reference to the files in user/js/calendar/img?
The image tag is trying to load the image from /user/img/next_year.gif. Either move the images there, or add the path to the code:
<img src="js/calendar/' + this.a_tpl.imgpath + 'next_year.gif" />
Note that image tags will load images relative to where the page was loaded from, while images used in a stylesheet will load images relative to where the style sheet file was loaded from.
You can't put javascript string functions directly in your HTML like this:
<img src="' + this.a_tpl.imgpath + 'next_year.gif" />
You can use a piece of javascript to document.write() the image tag inline or you can create the tag dynamically in javascript and set the .src property using JS after the document has been loaded. But, you can't just throw some javascript into the middle of your HTML like this.
For static definitions of image URLs in an HTML file, the paths should either be relative to the page location or they should be relative to the top of your domain or they should be a fully qualified domain/path.

Categories

Resources