Dropzone.js 显示存储的图像
Dropzone.js show stored images
我在 Laravel 应用程序中使用 dropzone.js
在我的平台上上传和显示图像。存储工作正常。我将它们保存到数据库和本地文件夹结构中,该文件夹结构有 full_size
文件夹用于完整图像,icon_size
用于应该适合缩略图的文件夹(基本上是图像的较小副本)。
我遇到的问题是当我尝试显示图像时。这是我的 dropzone 配置文件:
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 调用 /image
工作正常并且 returns 数据库中的图像实例
但是当每个图像都应该包含在视图中时,它出错了
我面临的问题是它出错了,因为我在 /project
路线下,因为这些是连接到项目的图像。我不知道如何删除那部分路线,以便直接从我的 public
文件夹
中获取图片
如果有人遇到同样的问题,我已经通过显式定义 URL 来解决它:
myDropzone.options.thumbnail.call(myDropzone, file, "http://" + window.location.hostname + '/images/icon_size/' + value.server)
http://
部分是必需的,否则它只是将其附加到现有的 link。
我在 Laravel 应用程序中使用 dropzone.js
在我的平台上上传和显示图像。存储工作正常。我将它们保存到数据库和本地文件夹结构中,该文件夹结构有 full_size
文件夹用于完整图像,icon_size
用于应该适合缩略图的文件夹(基本上是图像的较小副本)。
我遇到的问题是当我尝试显示图像时。这是我的 dropzone 配置文件:
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 调用 /image
工作正常并且 returns 数据库中的图像实例
但是当每个图像都应该包含在视图中时,它出错了
我面临的问题是它出错了,因为我在 /project
路线下,因为这些是连接到项目的图像。我不知道如何删除那部分路线,以便直接从我的 public
文件夹
如果有人遇到同样的问题,我已经通过显式定义 URL 来解决它:
myDropzone.options.thumbnail.call(myDropzone, file, "http://" + window.location.hostname + '/images/icon_size/' + value.server)
http://
部分是必需的,否则它只是将其附加到现有的 link。