Adding an image to a cell within a PUG table

I am currently utilizing PUG to display the results of an API call. Among the properties returned is a link to an image, which I would like to showcase in the final column. Ideally, I want to ensure that the image size is responsive and doesn't overwhelm the entire page.

Within the array of objects being passed, you can locate the image link here: item.result.image.contentUrl

Sample HTML code:

  head
    title= Results
    link(rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous")
    body
      table(class="table table-striped")
        thead(class="thead-dark")
          tr
            th(scope="col") Result for #{searchTerm}
            th(scope="col") Description
            th(scope="col") Image
        tbody
            each item in searchData
                tr
                    td(scope="row")= item.result.name
                    td(scope="row")= item.result.description
                    if !item.result.image
                      td(scope="row") Image not found
                    else
                      td(scope="row") img(src= item.result.image.contentUrl)

The current implementation of the last row seems incorrect. Despite my efforts, I have been unable to find any helpful resources on this issue. Would appreciate any suggestions or guidance?

javascriptexpresspug

Answer №1

To ensure the img is its own tag, make sure to place it on a new line indented under the td:

td(scope="row")
  img(src= item.result.image.contentUrl)

Consider flipping your conditional for better readability:

if item.result.image
  td(scope="row")
    img(src= item.result.image.contentUrl)
else
  td(scope="row") Image not found

Alternatively, you can improve it further like this:

td(scope="row")
  if item.result.image
    img(src= item.result.image.contentUrl)
  else
    div Image not found

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

Issue with displaying content within a custom element for children was not seen

The content within the 'Child content' span is appearing in the Light DOM, but for some reason it's not being displayed on the actual page (refer to the screenshot provided). Does anyone have any insights as to why it might not be visible? ...

javascriptshadow-domcustom-element

Javascript's simplistic addition function is not functioning properly

Learning JavaScript has been a bit challenging for me, especially when it comes to simple concepts. I'm trying to write code that sums two numbers together, but for some reason, it's not working. function sum() { var number1 = documen ...

javascript

Vue.js - displaying alert and redirecting after submitting axios form

I have a form that is functioning properly and inserting data correctly. However, if the user clicks the submit button multiple times, the data gets inserted multiple times. To prevent this, I want to redirect the user to another page and display a success ...

javascriptvue.jsaxios

Adding options to a dropdown list dynamically within a ASP.NET Datagrid using Jquery

While the function in my 'aspx' page is functioning properly, I am facing an issue with the 'dropdown' inside the GridControl. It appears to be getting duplicated from the original row and not updating with the values from the appended ...

javascriptjqueryasp.netxml

Attempting to develop a next.js web application using Vercel has hit a roadblock for me. Upon running the "vercel dev" command in the terminal, an error message is

vercel dev Vercel CLI 28.5.3 > Creating initial build node:events:491 throw er; // Unhandled 'error' event ^ Error: spawn cmd.exe ENOENT at ChildProcess._handle.onexit (node:internal/child_process:285:19) at onErrorNT (nod ...

javascriptnode.jsreactjsnext.jsvercel

Solving an object in ui-router state using ui-sref

Dealing with a large JSON object in an Angular controller and wanting to pass it to the controller of a template that will be displayed in a ui-view. I am aware that parameters can be passed to states using ui-sref, but I do not want this object to be visi ...

javascriptangularjsangular-ui-router

What is the significance of enclosing Button within CardActions in Material-UI?

As I explored the Card documentation on MUI, I found that the Button inside the card is always enclosed within CardActions. However, I couldn't quite grasp the purpose of this tag as it wasn't clearly explained in the documentation. The only noti ...

javascriptmaterial-ui

Why isn't the length of the Array changing when using React's useState hook

I am facing a challenge trying to understand why the value of inputElementArray.length consistently remains 0 when accessed within the useEffect method. function view() { const [inputElementArray, setInputElementArray] = useState<HTMLInputElement[]& ...

javascriptreactjs

Having trouble accessing the property 'keys' of undefined in React event handling operations

I am currently working on implementing a button that executes Javascript code roshtimer(), along with the ability for users to trigger the command using hotkeys. Users should have the option to either click the button or press 'r' on their keyboa ...

javascriptreactjsevent-handling

Is it possible to automatically mute an HTML 5 video when closing the modal?

Is there a way to pause a video that plays in a modal and continues playing in the background when the modal is closed? I am using the Materialize library. <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <!-- Compiled ...

javascriptjqueryhtml

Click on the appended text to remove it using Jquery

Seeking a more efficient and streamlined approach for appending and removing appended spans, divs, or text. Below is the code snippet - any insights on what could be improved? /* HTML CODE */ <div id="appendHere" style="padding:10px;border:solid 1px ...

javascriptjqueryhtmlcssappend

Combining meshes results in a lower frame rate

I have combined approximately 2500 meshes, each with its own color set, but my FPS is lower than if I had not merged them. Based on THIS article, merging is recommended to improve FPS performance. Is there something I am overlooking? var materials = new ...

javascriptmergethree.jsmeshframe-rate

Recommendations for Configuring VPS for Angular2 and .Net Application

My team and I are currently in the process of developing an application that combines Angular2 for the front-end and Web API ASP.NET for the back-end. We are currently at the stage of configuring a VPS for this application but unfortunately, we lack the ...

javascriptasp.net-mvcangularconfigurationvps

Including onMouseUp and onMouseDown events within a JavaScript function

I am experiencing an issue with a div that contains an input image with the ID of "Area-Light". I am attempting to pass the ID of the input image to a function. Although event handlers can be directly added inside the input tag, I prefer to do it within ...

javascripthtml

What could be causing the lack of data with 'react-hook-form'?

I have encountered an issue while working with react-native and using 'react-hook-forms' for creating dynamic forms. The problem is that the data object returned is empty, even though it should contain the values entered in the input fields. When ...

javascriptreactjsreact-nativereact-hooks

Several different forms are present on a single page, and the goal is to submit all of the data at

Looking for assistance with combining Twitter and Google data entry at once. Here's the code I've developed: Please guide me on how to submit Twitter and Google details together. <html> <head> <script type="text/javascript">< ...

javascripthtmlforms

Click the button to automatically insert the current time

Hello, I am new to scripting and seeking some guidance. I have a code that retrieves the current time and sends it to a MySQL database when a button is clicked. <form action="includes/data_input.inc.php" method="POST"> <!-- button - Start ...

javascriptphphtml

Discover additional Atom extensions

I am exploring the possibility of implementing a feature in my Atom package where it can automatically detect whether specific third-party packages have been installed. Currently, my package adds configuration for one such third-party package, but I want t ...

javascriptnode.jsatom-editor

The tooltip feature is malfunctioning

The content: <table class="table table-hover"> <?php foreach ($query as $row){ echo '<tr ><td > <label class="checkbox"> '.form_checkbox('delete[]', $row['link']).anchor("site ...

javascriptjquerycodeigniter

Node package unable to undergo tree shaking process

My node module structure is similar to this: # color.js export var red = '#f00'; export var yellow = '#ff0'; export var blue = '#00f'; # images.js export var image1 = '<base64 string approximately ~ 500kb>&apos ...

javascriptnode.jsreactjs