我使用傳單為互動式地圖創建了自己的擴展。但我無法在地圖上顯示我的圖片：
我已經在后臺上傳了一張圖片：
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
}
}
}
}
地圖.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/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/[email protected]/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 檔案中呈現它嗎？）
謝謝您的幫助。
uj5u.com熱心網友回復：
關于什么？
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);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/412196.html
標籤：