0
323
ViewsCómo mostrar una imagen usando Fluid (ViewHelper) desde un archivo JavaScript en TYPO3
Creé una extensión propia para un mapa interactivo usando folleto. Pero no puedo mostrar mi imagen para un mapa:
Ya he subido una imagen en backend: 
configuración.tiposcript :
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 } } } }Mapa.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>parque.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);Para verificar escribí este fluido en Map.html:
<f:for each="{image}" as="fileReference"> <f:image class="img-fluid" image="{fileReference}"/> </f:for>Si escribí el fluido anterior en Map.html, se muestra una imagen. ¡Pero fuera del folleto! Quiero mostrar la imagen en un folleto...
¿Cómo puedo escribir en un archivo HTML y JavaScript para mostrar una imagen en un folleto?
(¿Y tengo que usar fluido en cualquier caso? Hay datos de imagen en mi extensión. ¿Puedo simplemente renderizarlos en un archivo javascript?)
Gracias por tu ayuda.
·
Juan Pablo Isaza
1 answers
Answer question0
¿Qué pasa?
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);
·
Juan Pablo Isaza
Report
Answer question