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>
image link concatenation with ejs syntax?
If I understand correctly, the final link consists of two variables from different sources:
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 ;)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With