无法加载图像选取器



我想加载图像选择器并隐藏下拉选择并仅显示图像

我已经尝试了基于以下代码https://rvera.github.io/image-picker/

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://rvera.github.io/image-picker/image-picker/image-picker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js">

</script>
</head>

<body>
<select multiple="multiple" id="image-picker-select" class="image-picker show-html">
<option data-img-src="http://placekitten.com/220/200" value="1">Cute Kitten 1</option>
<option data-img-src="http://placekitten.com/180/200" value="2">Cute Kitten 2</option>
<option data-img-src="http://placekitten.com/130/200" value="3">Cute Kitten 3</option>
<option data-img-src="http://placekitten.com/270/200" value="4">Cute Kitten 4</option>
</select>
<script>
$(document).ready(function() {
$('select').material_select();
$("select").imagepicker({
hide_select: true
})
});
</script>
</body>
</html>

第一个问题是,由于您为imagepicker库抓取raw.github域,导致出现CORB阻塞错误。因此,将该文件下载到您的项目中。要隐藏选择器,可以使用进行简单初始化

$("select").imagepicker({
hide_select: true
});

最新更新