2017-10-29 5 views
0

Ich verwende dropzone.js in meiner Laravel App, um Bilder auf meiner Plattform hochzuladen und zu zeigen. Das Speichern funktioniert gut. Ich speichere sie in der Datenbank und lokal in Ordnerstruktur, die full_size Ordner für Vollbilder und icon_size für diejenigen, die als Miniaturbild passen soll (im Grunde eine kleinere Kopie des Bildes).Dropzone.js zeige gespeicherte Bilder

Das Problem, mit dem ich konfrontiert bin, ist, wenn ich versuche, Bilder zu zeigen. Das ist mein Sprungplatz Konfigurationsdatei:

Dropzone.options.realDropzone = { 
    previewsContainer: '#dropzonePreview', 
    previewTemplate: document.querySelector('#preview-template').innerHTML, 
    addRemoveLinks: true, 
    dictRemoveFile: 'Remove', 

    // The setting up of the dropzone 
    init: function() { 

    var myDropzone = this 

    $.get('/image', function (data) { 

     $.each(data.images, function (key, value) { 

     var file = {name: value.original, size: value.size} 
     myDropzone.options.addedfile.call(myDropzone, file) 
     myDropzone.options.thumbnail.call(myDropzone, file, 'images/icon_size/' + value.server) 
     myDropzone.emit('complete', file) 
     }) 
    }) 

    this.on('removedfile', function (file) { 

     $.ajax({ 
     type: 'POST', 
     url: 'image/destroy', 
     data: {id: file.name, _token: $('#csrf-token').val()}, 
     dataType: 'html', 
     success: function (data) { 
      var rep = JSON.parse(data) 
     } 
     }) 

    }) 
    }, 
    error: function (file, response) { 
    if ($.type(response) === 'string') 
     var message = response //dropzone sends it's own error messages in string 
    else 
     var message = response.message 
    file.previewElement.classList.add('dz-error') 
    _ref = file.previewElement.querySelectorAll('[data-dz-errormessage]') 
    _results = [] 
    for (_i = 0, _len = _ref.length; _i < _len; _i++) { 
     node = _ref[_i] 
     _results.push(node.textContent = message) 
    } 
    return _results 
    }, 
    success: function (file, done) { 
    } 
} 

Ajax-Aufruf auf /image funktioniert gut und gibt Beispiele von Bildern, die

enter image description here

in der Datenbank sind, aber wenn jedes der Bilder soll in einbezogen werden die Ansicht, es wird erroring aus

enter image description here

das Problem, das ich bin Gegenüberstellen ist, dass es ausgeht, weil ich unter einer /project Route bin, da diese Bilder mit einem Projekt verbunden sind. Ich weiß nicht, wie man diesen Teil der Strecke zu entfernen, so dass ich die Bilder direkt aus meinem public Ordner hole

Antwort

0

Falls jemand gleiches Problem begegnet, ich habe es gelöst, indem für fetching explizit URL definieren:

myDropzone.options.thumbnail.call(myDropzone, file, "http://" + window.location.hostname + '/images/icon_size/' + value.server) 

Der http:// Teil ist obligatorisch, ansonsten wird er einfach an den bestehenden Link angehängt.