使用DirectoryTerator将图像从脚本加载到flexbox中 - Load image from script into flexbox using DirectoryIterator

Load image from script into flexbox using DirectoryIterator

我读了很多文章，但仍然无法正常工作。我正在写一个电影评论网站，我想把电影标题的图像加载到我的flexbox中。

<body>
    <ul class="flex-container">
        <?php
            foreach (new DirectoryIterator('/Volumes/Movies') as $file) {
                if($file->isDot() || $file->getBasename() === '.DS_Store' || $file->getExtension() === 'srt') continue;
                $fullDir = "/Movies/" . $file;
                $fileParts = explode(".", $file);       
                $img = file_get_contents('http://www.movieposterdb.com/embed.inc.php?movie_title='.$fileParts[0]);  
                echo '<li class="flex-item"><img src="' . $img . '" /><a href="Movies/'. $file .'" download>'. $file .'</a></li>';
            }
        ?>
    </ul>
</body>

电影只是以moviepsterdb（例如Avatar (2009).txt）所需格式命名的文本文件。这是我最近的一次尝试。我在flexbox上看到了图像，但图像从未加载。如何将movieposterdb中的延迟加载映像获取到我的flexbox容器中？

检查movieposterdb的输出。它返回jsdocument.write如下：

document.write('<a target='"_new'" href='"http://www.cinematerial.com/movies/avatar-i499549'"><img title='"Avatar'" alt='"Avatar'" style='"width: 100px; height: 143px; border: 0px;'" src='"http://www.movieposterdb.com/posters/10_08/2009/499549/t_499549_43475538.jpg'" /></a>');

所以你的代码是这样的：

<body>
    <ul class="flex-container">
        <?php
            foreach (new DirectoryIterator('/Volumes/Movies') as $file) {
                if($file->isDot() || $file->getBasename() === '.DS_Store' || $file->getExtension() === 'srt') continue;
                $fullDir = "/Movies/" . $file;
                $fileParts = explode(".", $file);       
                $img = file_get_contents('http://www.movieposterdb.com/embed.inc.php?movie_title='.$fileParts[0]);  
                echo '<li class="flex-item"><script>' . $img . '</script><a href="'. $fullDir .'" download>'. $file .'</a></li>';
            }
        ?>
    </ul>
</body>