Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

image link concatenation with ejs syntax?

I am trying to build an <img src= link concatenation in a .ejs file. A part of the link is coming from a json file, build in my .js file.

The image shall be shown on my website.

Maybe it is just the syntax, I am very new to the topic.

I tried to add <%= user.thumbnail%>

<p class="name">Name: <%= user.name %></p> // to get the name, this is working

<p class="thumbnail"><img src="https://website/character/ + <%= user.thumbnail%> "></p>   // is not working

<p class="thumbnail"><img src="https://website/character/ + '<%= user.thumbnail%>'"></p>   // is also not working

Thanks for help :)

edit:

index.js:

var last = "last/part/oflink.jpg";
var thumbnail= "https://firstpartoflink/character/" + last;

all I want is to show the image in the ejs file, like

index.ejs:

<p class="thumbnail"><img src="  SyntaxToGetThumbnailVar  " /> </p>
like image 842
a25 Avatar asked Mar 31 '26 09:03

a25


1 Answers

image link concatenation with ejs syntax?

If I understand correctly, the final link consists of two variables from different sources:

  1. controller
  2. json file

Variables passed from controller to view are interpreted by EJS through <% variable %>. For the other hand, I am considering the json file is read from client side. So, they are interpreted at different moments. Probably you have something like this:

// Controller
res.render("myView", { user: { thumbnail: 'partial-path' }});

// View
<html>
    ...
    <p class="thumbnail"><img src="https://website/character/<%= user.thumbnail %>"></p>
    ...
    <script src="myJson.js"></script>
    ...
</html>

A possible solution is hide image at the rendering time and get the last part of the link from JSON file using JavaScript. After that just set src with the final link:

<html>
    ...
    <p class="thumbnail"><img id="someId" style="display: none" src="https://website/character/<%= user.thumbnail %>"></p>
    ...
    <script src="myJson.js"></script>
    <script>
        var linkPart = myJsonObj.someProperty;
        var el = document.getElementById('someId');
        el.src = el.src + linkPart;
        el.style.display = '';
    </script>
    ...
</html>

I hope this helps you solve the problem ;)

like image 113
Marcelo Vismari Avatar answered Apr 02 '26 21:04

Marcelo Vismari



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!