9 Replies - 556 Views - Last Post: 10 July 2020 - 11:16 AM

#1 ben255   User is offline

  • D.I.C Addict

Reputation: 45
  • View blog
  • Posts: 537
  • Joined: 09-September 13

Problems with loading image in bootstrap

Posted 09 July 2020 - 01:30 PM

Im kinda new to web development but I'm using nodejs with express and handlebars.

On the image im able to load a picture from the web. But as i try to upload my own its not working. I have made a image folder. Ive tried both the absolute path to the image and directly from the images folder and to the image. Visual studio code can open the path and when i try with both paths it opens the correct image, but every time i try to load it into the page its just empty. Im using hbs filetype for the webpage

<div class="container">
    <div class="row">
        <div class="col">
            <div class="card bg-light mb-3" style="max-width: 540px;">
                <div class="row no-gutters">
                    <div class="col-md-4">
                        <img src="images/ben.png" class="card-img">
                    </div>
                    <div class="col-md-8">
                        <div class="card-body ">
                            <h5 class="card-title">Benjamin</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>




Is This A Good Question/Topic? 0
  • +

Replies To: Problems with loading image in bootstrap

#2 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2766
  • View blog
  • Posts: 8,072
  • Joined: 15-January 14

Re: Problems with loading image in bootstrap

Posted 09 July 2020 - 01:42 PM

Open your browser's developer tools and refresh the page and check the Network tab, make sure the request for that image is not an error. And, of course, make sure you've uploaded the image to the web server.
Was This Post Helpful? 1
  • +
  • -

#3 ben255   User is offline

  • D.I.C Addict

Reputation: 45
  • View blog
  • Posts: 537
  • Joined: 09-September 13

Re: Problems with loading image in bootstrap

Posted 09 July 2020 - 01:52 PM

Aha, cool i tried it and got "Failed to load resource: the server responded with a status of 404 (Not Found)" im not using a web server atm, just on localhost
Was This Post Helpful? 0
  • +
  • -

#4 ben255   User is offline

  • D.I.C Addict

Reputation: 45
  • View blog
  • Posts: 537
  • Joined: 09-September 13

Re: Problems with loading image in bootstrap

Posted 09 July 2020 - 02:06 PM

Oh, i need to read the image first from node then send it to the page with the get request?
Was This Post Helpful? 0
  • +
  • -

#5 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2766
  • View blog
  • Posts: 8,072
  • Joined: 15-January 14

Re: Problems with loading image in bootstrap

Posted 09 July 2020 - 03:04 PM

If it's a 404 then you probably just have the wrong URL. The Network tab will show you the complete URL it's requesting.

If you want to use absolute URLs but not worry about domains and protocols, just start the URL with a slash. If you write "/images/image.png" on any page inside any directory, the web browser will request "<protocol>://<domain>/images/image.png" for any page that has the URL. It will use the same protocol and domain of the page. If the URL doesn't start with a slash then the browser considers it relative to the current page instead of relative to the server.
Was This Post Helpful? 0
  • +
  • -

#6 ben255   User is offline

  • D.I.C Addict

Reputation: 45
  • View blog
  • Posts: 537
  • Joined: 09-September 13

Re: Problems with loading image in bootstrap

Posted 10 July 2020 - 06:28 AM

Ok, so if i don't do a '/' i need to go from app.js but with one its from the hbs file. But im using handlebars where i have a main hbs file that loads a different body. im guessing its from the body in this case since im requesting the image there. But I've tried all paths i can think of and still can't find the image.

the file system looks like this atm

                                        (manifolder with app.js)


                                                       (views folder)

               (layouts folder with main hbs)          (images folder with images)







the layout folder contains the layout and im using handlebars to load a body and the bodys are located in the views folder. Ive tried all paths i can think of going from main folder, layouts folder, or views folder.

Im using safari and the network thing doesn't show the path. but the console shows a path which is "http://localhost:3000/images/ben.png" and I've tried a lot more different ones.
Was This Post Helpful? 0
  • +
  • -

#7 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2766
  • View blog
  • Posts: 8,072
  • Joined: 15-January 14

Re: Problems with loading image in bootstrap

Posted 10 July 2020 - 09:12 AM

Well, what should the path be? Where is the image?
Was This Post Helpful? 0
  • +
  • -

#8 ben255   User is offline

  • D.I.C Addict

Reputation: 45
  • View blog
  • Posts: 537
  • Joined: 09-September 13

Re: Problems with loading image in bootstrap

Posted 10 July 2020 - 09:31 AM

image is in the images. Ive tried from the app.js which will be views/images/ben.png, from /images/ben.png and /../images/ben.png incase its looking from the layout file
Was This Post Helpful? 0
  • +
  • -

#9 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2766
  • View blog
  • Posts: 8,072
  • Joined: 15-January 14

Re: Problems with loading image in bootstrap

Posted 10 July 2020 - 10:56 AM

The browser doesn't send requests based on the various files you're using, it sends requests based on the current URL. It doesn't matter how the page is put together, the browser doesn't know any of that, it just gets the HTML, and parses it. When there's a URL for another resource, the browser sends a request for it.

If using "/images/ben.png" doesn't work, then the file is not at http://localhost/images/ben.png, so if that's not where the file is, then where is it? What URL do you type in the browser to see the picture?
Was This Post Helpful? 1
  • +
  • -

#10 ben255   User is offline

  • D.I.C Addict

Reputation: 45
  • View blog
  • Posts: 537
  • Joined: 09-September 13

Re: Problems with loading image in bootstrap

Posted 10 July 2020 - 11:16 AM

aha i think im understanding it. thanks for all the help. i added
app.use(express.static('views'));
in the app.js file and then /images/ben.png worked. so im guessing the server didn't know that it should look for files in that folder. not 100% understanding but somewhat :P. thanks again
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1