php 画廊中不显示带有空格的单词的结果

Question

I'm creating a gallery in php, where it has a filter divided into categories. But when a word has a space it doesn't show the associated images. I'm working on two tables, one that creates the categories and the other that is from the gallery.

This is my code and the sql queries:

Querys:

$sql = "selec categoria AS categoria_formatted from cat_lar";
$galerialar = $connect->query($sql);
$sql = "select foto,categoria_lar from galeria_lar,cat_lar  Where categoria_lar=categoria";
$galerialarconde = $connect->query($sql);

Code:

<div class="popular page_section">
    <div class="container">
        <div class="row">
        <div align="center">
        <button class="filter-button" data-filter="all">All</button>
        <?php mysqli_data_seek($galerialar, 0);
        
        while( $galerialarc = $galerialar -> fetch_assoc()){ ?>
            <button class="filter-button" data-filter="<?php echo $galerialarc['categoria_formatted']?>"><?php echo $galerialarc['categoria_formatted']?></button>
        <?php } ?>
        </div>
        
        <br/>
        <?php 
        while( $galerialarc = $galerialarconde -> fetch_assoc()){ ?>
        <div class="gallery_product col-sm-3 col-xs-6 filter <?php echo $galerialarc['categoria_lar']?>">
            <a class="fancybox" rel="ligthbox" href="admin/galeria/uploads/<?php echo $galerialarc['foto']?>">
                <img class="img-responsive" alt="" src="admin/galeria/uploads/<?php echo $galerialarc['foto']?>" width="150px" />
            </a>
        </div>
        <?php }?>




        </div>
    </div>
</div>

SCRIPT:

<script>
$(document).ready(function(){

    $(".filter-button").click(function(){
        var value = $(this).attr('data-filter');
        
        if(value == "all")
        {
            $('.filter').show('1000');
        }
        else
        {
            $(".filter").not('.'+value).hide('3000');
            $('.filter').filter('.'+value).show('3000');
            
        }

        if ($(".filter-button").removeClass("active")) {
            $(this).removeClass("active");
        }
        $(this).addClass("active");
    });
});
/*  end gallery */

$(document).ready(function(){
    $(".fancybox").fancybox({
        openEffect: "none",
        closeEffect: "none"
    });
});
   
</script>

Can they help me? Because I've already tried to put the words with "_" and replace and it remained the same

Answer 1

As you suggest yourself, the image URLs can't contain whitespaces. If you already tried to replace whitespaces with underscores ( _ ), remember to upload the image files with that name and replace the foto url in the database with the new images.

If it doesn't work, try to investigate where exactly the problem occurs. Is the queries returning the right results (try to var_dump() the result and see if they are missing. If you think the problem happends in the HTML, try using your "inspect" feature in your browser and see if a source URL is provided for the image element and check if this URL really has an image.