Problems with images in html

html

#1

Hello guys,
I’ve got a big problem with my images.
Here is my code:
< img id="graduation_cap"src=“images/graduation_cap_green.png”/>
My workspace is named schoolhub and I have two folders, fonts and images.
My pages in php are in my workspace.
My problem is that I can’t display my images when I run my pages.
If you can help me, it would be nice.


#2

Your img tag spaces look incorrect. I would also add a / before images. Try:

<img id="graduation_cap" src="/images/graduation_cap_green.png"/>


#3

I have the same problem and I still can’t figure it out.

I’ve tried every possible combination of paths, changing the location of the image file, but nothing seems to work.
I work in node.js
My project is named “Upload”, and my image.html file is in that folder.
The image i’m trying to show is in another folder “images”. I also have another copy in the project file, just in case.

So I’ve tried:

< img src=“images/userPhoto.jpg”>
< img src="/images/userPhoto.jpg">
< img src=“userPhoto.jpg”>

Any other suggestions?


#4

Could you post the contents of your server.js here? In NodeJS, you need to explicitly serve folders using packages like serve-static if you’re using Express or koa-static if you’re using Koa, or just a middleware that looks like this (Express only), for individual files:

app.get('/images/userPhoto.jpg', function (req, res, next) {
    res.sendFile(path.join(__dirname, 'images', 'userPhoto.jpg'))
}

#5

Thank you for your reply!

I works the way you suggested, however, I need to show the image in .ejs or .html file. So that’s where my problem is.

This is my server.js file:

var express =   require("express");
var multer  =   require('multer');
var app         =   express();
var storage =   multer.diskStorage({
  destination: function (req, file, callback) {
    callback(null, './uploads');
  },
  filename: function (req, file, callback) {
    callback(null, file.fieldname+'.jpg');
  }
});
var upload = multer({ storage : storage}).single('userPhoto');
app.set("view engine", "ejs");
app.get('/',function(req,res){
      res.sendFile(__dirname + "/index.html");
});
app.post('/api/photo',function(req,res){
    upload(req,res,function(err) {
        if(err) {
            console.log(err);
            return res.end("Error uploading file.");
        }
        res.end("The file is uploaded.");
    });
});
app.get("/image", function(req,res){
    res.sendFile(__dirname + "/image.html");
});
app.listen(process.env.PORT, process.env.IP, function () {
    console.log("the server has started");
});

and in image.html i have:

<img src="images/userPhoto.jpg"/>

but as I said, I’ve already tried all the possible path combinations.


#6

So, nowhere in your routes have you defined the /images path. I would take a look at serve-static, where you can just write this:

var serveStatic = require('serve-static')

app.use(serveStatic('parent-folder-of-images-folder/'))

Then, you should be able to access /images/anything.png


#7

Well, that’s exactly what I needed! I don’t really have any experience, and i didn’t know how static paths work.

Thank you so much!


#8

would you please elaborate on how to set the parent directory in C9. It is confusing to me. Is it with regards to were my “node app.js” execution command directory or somewhere else? Thank you


#9

An example structure would be a folder with an app.js file and a package.json and maybe some other files, then you might have a public/ folder. Inside the public folder, you could have an images folder and a js folder. In my code in the previous post, the serve-static entry would be in app.js and would refer to the public folder. You could either use serveStatic("./public"), or you could use serveStatic(path.join(__dirname, "public")) (read about the difference between using . and __dirname here. Then you should be able to access images at <workspace name><username>.c9users.io/images/<image>.<extension> and JS files at the /js/whatever.js path.