C# ExtJS。从数据库中获取图像
我的图像查看器:C# ExtJS。从数据库中获取图像,c#,extjs,C#,Extjs,我的图像查看器: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title&
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="http://cdn.sencha.com/ext/gpl/5.1.0/build/packages/ext-theme-classic/build/resources/ext-theme-classic-all.css">
<script type="text/javascript" src="http://cdn.sencha.com/ext/gpl/5.1.0/build/ext-all.js"></script>
<script type="text/javascript" src="http://cdn.sencha.com/ext/gpl/5.1.0/build/packages/ext-theme-classic/build/ext-theme-classic.js"></script>
<style>
.thumbnail {
padding: 4px;
background-color: #e6e6e0;
border: 1px solid #d6d6d0;
float: left;
margin-right: 10px;
margin-bottom: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<script>
Ext.define('Image', {
extend: 'Ext.data.Model',
fields: [
{ name: 'href', type: 'string' },
{ name: 'caption', type: 'string' }
]
});
var imagesStore = Ext.create('Ext.data.Store', {
id: 'imagesStore',
model: 'Image',
data: [
{ href: 'images/Hydrangeas.jpg', caption: 'Hydrangeas' },
{ href: 'images/Jellyfish.jpg', caption: 'Jellyfish' },
{ href: 'images/Koala.jpg', caption: 'Koala' },
{ href: 'images/Lighthouse.jpg', caption: 'Lighthouse' }
]
});
var imageTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumbnail" onClick="javascript:openWindow(this.lightbox);" >',
'<img src="{href}" width="200px" height="150px" />',
'<br/><span>{caption}</span>',
'</div>',
'</tpl>'
);
var sel_thumb_id = 0;
var thumbs = Ext.create('Ext.view.View', {
id: 'thumbs',
store: Ext.data.StoreManager.lookup('imagesStore'),
tpl: imageTpl,
itemSelector: 'img',
emptyText: 'No images available',
renderTo: document.body,
listeners: {
}
});
var img = Ext.create('Ext.Img', {
id:'img',
src: '',
shrinkWrap: true
});
var next = Ext.create('Ext.Button', {
xtype: 'button',
text: 'Next',
width: 100,
handler: function () {
if (img_id < imagesStore.data.items.length ) {
img_id = img_id + 1;
var nextSrc = imagesStore.data.items[img_id].data.href;
console.log(nextSrc);
Ext.getCmp('img').setSrc(nextSrc);
}
}
});
var previous = Ext.create('Ext.Button', {
xtype: 'button',
text: 'Previous',
width: 100,
handler: function () {
if (img_id > 0) {
img_id = img_id - 1;
var nextSrc = imagesStore.data.items[img_id].data.href;
Ext.getCmp('img').setSrc(nextSrc);
}
}
});
var lightbox = new Ext.window.Window( {
id: 'lightbox',
title: '',
height: 600,
width: 800,
layout: 'fit',
items: [img],
modal: true,
draggable: false,
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
padding: '5 20',
align: 'center',
items: [previous, next]
}],
closeAction: 'hide',
resizable: false
})
function openWindow(lightbox) {
img.setSrc('images/Hydrangeas.jpg');
Ext.getCmp('lightbox').show();
img_id = 0;
}
</script>
</body>
这样,图像就存储在一个文件夹中。现在我想从数据库加载图像。我不是指数据库中的图像路径,我是指图像。我可以使用c asmx web服务从数据库中获取图像数据。
1我应该选择什么类型在ms sql中存储图像?
2如何转换从数据库获取的数据并显示为图像?您的问题太广泛,您应该展示您已经尝试过的内容以及您面临的问题。这听起来更像是一个规范,而不是一个问题,也许值得回顾一下?到目前为止你做了什么?关于你的问题的更多信息可能会有所帮助。如果您想从数据库加载图像,请将图像路径存储在其中,这是您提供的信息带给我的第一件事。