图像 link 与 ejs 语法的连接？

Question

我正在尝试在 .ejs 文件中构建 <img src= link 串联。 link 的一部分来自 json 文件，构建在我的 .js 文件中。

图像将显示在我的网站上。

也许只是语法问题，我对这个话题很陌生。

我尝试添加 <%= 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

感谢您的帮助:)

编辑：

index.js:

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

我只想在ejs文件中显示图片，比如

index.ejs:

<p class="thumbnail"><img src="  SyntaxToGetThumbnailVar  " /> </p>

Answer 1

如果我没理解错的话，最后的link由来自不同来源的两个变量组成：

控制器
json 文件

从控制器传递到视图的变量由 EJS 通过 <% variable %> 解释。另一方面，我正在考虑从客户端读取 json 文件。因此，它们在不同的时刻被解释。可能你有这样的事情：

// 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>

一个可能的解决方案是在渲染时隐藏图像并使用 JavaScript 从 JSON 文件中获取 link 的最后一部分。之后只需将 src 设置为最终的 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>

希望能帮到您解决问题;)

Answer 2

这对我有用：

index.js:

.get('/', (req, res) => {
    var data = { 'user': { 
        'thumbnail' : g_chardata.thumbnail
    } 
     };
   res.render('index', data)
})

index.ejs:

<!-- Build Image Link from Json and string -->
        <p id="image" style="display: none"><%= user.thumbnail %></p>

        <script type="text/javascript">
        window.onload = function()
        {
            var pic = document.getElementById("image").innerText;
            document.getElementById('thumbnail').src = 'https://link.com/character/' + pic;
        };
        </script>
        <!-- Show Thumbnail Bild -->
        <img src="" id="thumbnail"/>

祝你愉快:)

图像 link 与 ejs 语法的连接？

image link concatenation with ejs syntax?

javascript

concatenation

string-concatenation

ejs

node.js