Picture is unavailable for viewing - (Express, Pugjs)

I'm having trouble getting an image to display on my page using a pug template. Despite following the setup and files correctly, the image still isn't showing up.

Here is what I have:

index.js

app.use('/images', express.static(path.resolve(__dirname, '../dist/assets')))

template.pug

img.logo(src='/images/logo.png')

The logo.png file is located in the /dist/assets/ folder.

No errors are being displayed, but the image is not loading when viewed on the page. When checking the image link from the developers tool in a new tab, the image does appear. I'm unsure of what could be causing this issue. Any help would be greatly appreciated!

javascriptexpresspugpugjs

Answer №1

Instead of setting the image path using the logo property, you should do it like this:

img.image(src='/images/logo.png')

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The verification of form is not done using an if statement

There are two forms in my code named formA and comments that I need to submit via AJAX. However, the current if and else conditions do not correctly identify the form and always trigger the alert message hello3. Here is the JavaScript function: function ...

javascriptjqueryajax

What is the best way to retrieve all collections and their respective documents in Firestore using cloud functions?

Seeking to retrieve an array structured as [1year, 1month, etc] with each containing arrays of documents. Currently encountering a challenge where the returned array is empty despite correct snapshot sizes. Unsure if issue lies with push() method implemen ...

javascriptnode.jsfirebasegoogle-cloud-firestore

What is the technique used to initialize the $route object?

Upon attempting to access this.$route in the created() hook, I noticed that it consistently returns an empty object when logged to the console. {path: '/', name: undefined, params: {…}, query: {…}, hash: '', …} fullPath: "/&q ...

javascriptvue.jsvue-router

The problem with the CSS Grid effect

Looking for assistance in creating a grid layout similar to the one on this website: Upon inspecting the page source, I found the following code snippet: http://jsfiddle.net/o45LLsxd/ <div ng-view="" class="ng-scope"><div class="biogrid ng-scope ...

javascriptangularjshtmlcss

Exploring JavaScript: Accessing an array object within another object

I'm having trouble accessing an array object within an object in JavaScript. The object structure is as follows: categories: Array(5) 0: name: "Electronics" subCategories: Array(16) 0: name: "Video Games & Accessories" __typena ...

javascriptarraysreactjs

Having trouble converting an Amazon S3 function into promises with when/node

I'm having trouble with an AWS S3 asynchronous function and encountering a strange issue. Here is the code snippet: var s3 = new AWS.S3(); var when = require('when'); var nodefn = require('when/node'); var getObjectP = nodefn.lif ...

javascriptnode.jsamazon-s3promisewhen-js

What are the best methods for retrieving data from a subcollection in Firebase/Firestore with maximum efficiency

Utilizing Firestore to store posts with simple properties like {title: 'hi', comment: true} has been a seamless process for fetching user-specific data, given the structure of my collection: posts/user.id/post/post.name. An example would be posts ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

How to Populate .handlebars Templates with Multiple SQL Results in Express

As a newcomer to the world of Express and Node.js, I am eager to understand how to display multiple SQL results on different elements of a web page. Though it may be a simple question for some, I am unsure how to proceed and would greatly appreciate any g ...

mysqlnode.jsexpresshandlebars.jsrouter

What is the reason behind using 'dummy' local variables to define return object keys?

I've come across a code similar to the one below on several occasions recently. One thing to observe is that modelMapper, viewMapper, and source are all defined as local variables but are not used anywhere else, except for being keys in the return ob ...

javascriptangularjs

Discover the best places to master AJAX

Although I have come across some related questions here, none of them exactly match mine. I am aware of excellent resources like code-school and code-academy where you can improve your PHP and JS skills by coding directly on the website. However, I am wo ...

javascriptphpjqueryajax

Identify the key name in an array of objects and combine the corresponding values

Here is an example of my array structure: array = [{ "name": "obj0_property0", "url": "picture1" }, { "name": "obj1_property0", "url": "picture1" }, { "name": "obj0_property1", "url": "picture2" }] I am looking to transform this array using J ...

javascriptnode.js

Issues with jwplayer functionality

After downloading the necessary files and carefully following all instructions, I am still experiencing issues with the player not functioning as expected. <code> <html> <head> <script type="text/javascript" src="/jwpl ...

javascriptjqueryjwplayer

Limit selection choices in select element

Similar Question: Prevent select dropdown from opening in FireFox and Opera In my HTML file, I have a select tag that I want to use to open my own table when clicked. However, the window of the Select tag also opens, which is not desirable. Is there a ...

javascripthtmlselect

Struggling to launch the application on OpenShift. Received the error message "program node app.js exited with code 8". Having difficulty determining the cause of the issue

I'm new to deploying apps in a production environment and I'm facing some issues. The app works fine locally, but on Openshift, I keep getting a "503 Service Temporarily Unavailable" error. I've tried troubleshooting for hours without any lu ...

node.jsmongodbexpressdeploymentopenshift

"Implementing constraints in Postgres using Node.js

Currently, I am struggling with writing a constraint code to handle situations where a user tries to search for an id that does not exist in the database (specifically PostgreSQL). Despite my efforts, the if statement in the code below does not seem to be ...

javascriptnode.jspostgresqlexpressnode-postgres

The function HandleKeyPress is failing to recognize the input from the down arrow

I'm currently working on developing a customized and user-friendly select input using React.js. My goal is to have the functionality where the up and down arrow keys behave like the tab key within the context of selecting options. In order to achieve ...

javascriptreactjsselectaccessibility

Having difficulty with a script not functioning properly within an onclick button

In my script, I am using the following code: for (var i in $scope.hulls) { if ($scope.hulls[i].id == 1234) { console.log($scope.hulls[i]); $scope.selectedHullShip1 = $scope.hulls[i]; } } The code works fine outside of the onclick button, but fails to run ...

javascriptangularjs

I am facing conflicts between vue-tsc and volar due to version discrepancies. How can I resolve this problem?

My vsCode is alerting me about an issue: ❗ The Vue Language Features (Volar) plugin is using version 1.0.9, while the workspace has vue-tsc version 0.39.5. This discrepancy may result in different type checking behavior. vue-tsc: /home/tomas/Desktop/tes ...

javascripttypescriptvue.jsvuejs3

Generating Dynamic Object Keys following Array Mapping

I have a vision of creating a sophisticated data structure resembling the configuration below: slots: { 'slot_1': { id: 'slot_1', associatedCard: {} }, 'slot_2': { id: 'slot_2& ...

javascriptreactjsalgorithmdata-structuresjsx

Using Selenium WebDriver in JavaScript to Extract Text from an Array

During my experimentation with Selenium webdriver in javacript, I encountered a challenge when trying to extract text from an array of WebElements (specifically cells within a table). The usual command getText() did not work as expected when attempting to ...

javascriptarraysselenium