Question

我正在创建一个新网站。我已经完成了基本的HTML / CSS / JQuery代码来生成网页。该网站将显示图像。现在我的问题是应该存储图像的位置以及如何检索图像。我做了研究，但我到处都是建筑。

我的理解是HTML页面会对Web服务器（如Apache）进行查询并获取数据/图像并显示它？ Web服务器的功能是根据查询提供数据，是吗？ jpeg图像，元数据，图库和图像之间的链接等数据将存储在何处？在某处有另一层DB吗？架构是否为HTML＆lt; - ＆gt; Apache＆lt; - ＆gt; DB？

或者我只是将我的图像放在数据库中并托管他们的数据。基本上从架构中取出Apache？查询将仅依赖于导航树中的当前阶段（没有特定于用户）。

Answer 1

DB不需要使用图像。它的工作方式更多：

HTML＆lt; - ＆gt; Apache＆lt; - ＆gt;图像

因为apache能够传递文件。

现在，有几种不同的工作方式。例如，图像可以在带有图像标题的php文件中动态加载。在这种情况下，该计划将是：

HTML＆lt; - ＆gt; Apache＆lt; - ＆gt; PHP＆lt; - ＆gt;图像

要做到这一点，您只需将图像放在apache用户可以访问的文件夹中。

例如，您可以在/ var / www / sitename中使用以下结构：

的index.html
img / my_image.jpg

在index.html中

<img src="img/my_image.jpg" ... />

编辑以回答您的问题：

创建一个将生成json数组的php脚本，例如：

page.php文件

<?php
switch($_GET['link']){
    case 'link1':
        images_links = array(
           'path/to/img1',
           'path/to/img2',
           ...
        );
        break;
    case 'link2':
        images_links = array(
           'path/to/img3',
           'path/to/img4',
           ...
        );
        break;
}

echo json_encode(images_links);
?>

让我们猜猜你的HTML是

<a>link1</a>
<a>link2</a>
<img class="imgToChange" src="..."/>
<img class="imgToChange" src="..."/>
...

然后你将这个javascript函数添加到你的html

function updateImages(clicked_link){
    // get the text of the link
    link_text = clicked_link.innerHTML;

    // send a request to page.php to get images's urls
    $.get( "path/to/page.php?link="+link_text, function( data ) {
     // data will be your json array
     images_links = data;

     // get a table of all images elements that can be changed
     var images = document.getElementsByClassName("imgToChange");

     // for each image in the json array
     for(var k=0; k<images_links.length; k++){
         images[k].src = images_links[k];
     }

    });
}

您只需在点击链接时调用此功能

<a onclick="updateImages(this)">link1</a>
<a onclick="updateImages(this)">link2</a>
<img class="imgToChange" src="..."/>
<img class="imgToChange" src="..."/>
...

数据如何从网络服务器流向网页。

1 个答案: