Question

我正在寻求帮助。我在一个项目中，我需要将图像上传到以html编码的freemarker模板（.ftl）。我正在使用hippo cms控制台创建站点地图等。我需要在项目中使用本地图像（来自项目目录），但是它们使用的URL来自localhost:8080/site/images。但是我不知道localhost:8080/site在我的项目中或它指向的位置。

这是代码：

所以

  <img src='https://99designs-start-attachments.imgix.net/alchemy-pictures/2016%2F02%2F22%2F04%2F07%2F21%2F9757e437-5ec1-4378-804f-ca0f9567c110%2F380048_Widakk.png?auto=format&ch=Width%2CDPR&w=250&h=250' class="agoraIcon"/>

这里我使用的是Internet图像，它可以正常工作，但是我需要在我的站点/freemarker/images/agoraLogo.PNG中使用该图像。

这是项目结构：

<!doctype html>
<html>

<head>
  <style type="text/css">
    body {
      font-family: Verdana;
    }
    
    .login {
      color: white;
      padding: 1%;
      background-color: #2B516B;
    }
    
    .contButton {
      padding: 0.5%;
      padding-left: 4%;
      padding-right: 4%;
      color: white;
      background-color: black;
      text-align: center;
      font-family: Verdana;
      border-radius: 10px;
    }
    
    .agoraIcon {
      height: 50px;
      width: 200px;
    }
    
    .content {
      text-align: center;
    }
    
    .credentials {
      padding: 0.5%;
      font-family: Verdana;
      border-radius: 10px;
    }
    
    #year {
      text-align: center;
    }
  </style>
</head>

<body>
  <img src='https://99designs-start-attachments.imgix.net/alchemy-pictures/2016%2F02%2F22%2F04%2F07%2F21%2F9757e437-5ec1-4378-804f-ca0f9567c110%2F380048_Widakk.png?auto=format&ch=Width%2CDPR&w=250&h=250' class="agoraIcon" />
  <div class="login" id="year">2018</div>

  <div class="content">
    <p><b>Inicia sesión con tu <br>cuenta de concesión</b></p>
    <input type="text" class="credentials" placeholder="Email" />
    <input type="password" class="credentials" name="psw" placeholder="Contraseña" />
    <div>
      <a href="http://localhost:8080/site/welcome" type="button">
        <button class="contButton" type="submit"> Continuar </button>
      </a>
    </div>
  </div>
</body>

</html>

图像目录

Answer 1

更改此内容：

<img src='https://99designs-start-attachments.imgix.net/alchemy-pictures/2016%2F02%2F22%2F04%2F07%2F21%2F9757e437-5ec1-4378-804f-ca0f9567c110%2F380048_Widakk.png?auto=format&ch=Width%2CDPR&w=250&h=250' class="agoraIcon"/>

至：

<img src='../images/agoraLogo.PNG' class="agoraIcon"/>

Answer 2

最好生成二进制链接。您可以使用@ hst.link标记执行此操作。

我认为您需要： <@ hst.link path =“ / freemarker / images / agoraLogo.PNG” var =“ image” />

var图片将包含链接。

有关更多详细信息，请参阅文档： https://www.onehippo.org/library/concepts/links-and-urls/hst-2-urls.html

我还可以建议您完成我们的教程吗？ https://www.onehippo.org/trails/demo-tutorials-and-download.html

如何使用freemarker模板和河马cms将图像放入html代码中？

2 个答案: