如何在 TYPO3 中使用 JavaScript 文件中的 Fluid (ViewHelper) 显示图片

Question

我使用传单为交互式地图创建了自己的扩展。但是我无法显示我的图片作为地图：

我已经在后台上传了图片：

setup.typoscript:

tt_content {
   interaktivekarte_karteuser =< lib.contentElement
   interaktivekarte_karteuser {
      templateName = Map
      dataProcessing {
         40 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
         40 {
            references.fieldName = tx_interaktiveKarte_image
            as = image
         }
      }
   }
}

Map.html:

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Default" />
<f:section name="content">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
    
    <div class="tx-interaktive-karte">      
      <div id="map">
        
      </div>
    </div>
  
</f:section>
</html>

park.js:

var map = L.map('map', {crs: L.CRS.Simple});
var bounds = [[0,0], [750,1200]];
L.imageOverlay('../Parks/Park.png', bounds).addTo(map);
map.fitBounds(bounds);

为了检查我在 Map.html 中写了这个流体：

<f:for each="{image}" as="fileReference">
  <f:image class="img-fluid" image="{fileReference}"/>
</f:for>

如果我在Map.html中写了上面的流体，就会显示一张图片。但在传单之外！我想在传单中展示图片...

如何在 HTML- 和 JavaScript- 文件中写入以在传单中显示图片？

（无论如何我都必须使用流体吗？图片数据在我的扩展程序中。我可以只在 javascript 文件中渲染它吗？）

感谢您的帮助。

Answer 1

怎么样？

HTML:

<div id="map" data-image="{image.0.publicUrl}">

</div>

JS:

var map = L.map('map', {crs: L.CRS.Simple});
var bounds = [[0,0], [750,1200]];
var imageUrl = $('#map').data('image');
L.imageOverlay(imageUrl, bounds).addTo(map);
map.fitBounds(bounds);

如何在 TYPO3 中使用 JavaScript 文件中的 Fluid (ViewHelper) 显示图片

How to display a picture using Fluid (ViewHelper) from a JavaScript-file in TYPO3

javascript

image

typo3