Определенное изображение src = "" не отображается в файле localhost.html / localhost.php, но отображается в виде простого файла .html - PullRequest
Новая
       32

Определенное изображение src = "" не отображается в файле localhost.html / localhost.php, но отображается в виде простого файла .html

0 голосов
/ 07 мая 2018

Я создаю свой первый веб-сайт как университетский проект, я не очень продвинут, в любом случае, у меня есть очень отличительная проблема.Мой клиент отправил мне кучу изображений в формате jpg с google drive.

У меня есть файл collection.php, который динамически заполняет каждую коллекцию, полученную из файла JSON.

Все работает отлично, кромеисточник для изображений ничего не показывает, если я использую определенные изображения, которые я скачал из интернета, то он работает нормально,

Забавно, что все эти изображения не работают на collection.php, даже не работают, когда я делаюТестовый файл: localhost / test.html,

Но когда я захожу в папку и просто дважды щелкаю файл test.html, файл открывается в браузере со следующим URL: file: /// Users/******/Sites/test.html И изображение показывает отлично, в конце концов, я попробую на Godaddy сервере, поэтому, если это проблема с сервером, я надеюсь, что они будут работать на Godaddy сервере В чем может быть проблема?Вот мой код:

HTML / PHP: 

    //Get the collections_id from the query string and get the ranges which make up the collection from the database
    $querystring = $_SERVER['QUERY_STRING'];
    $splitQS = explode('=', $querystring);
    $collectionReference = $splitQS[1];

    $file = 'json/collectionSlides_' . $collectionReference . '.json';

    //Find get and loop through JSON data which has details about collection range sliders

    $collFile = file_get_contents($file);

    $collection = json_decode($collFile);

    for ($i=0; $i < count($collection->Collection); $i++) { 
        $collectionDisplay[$i] = array(
            'id' => $collection->Collection[$i]->range_id,
            'heading' => $collection->Collection[$i]->heading,
            'image1' => $collection->Collection[$i]->slide1,
            'image2' => $collection->Collection[$i]->slide2,
            'image3' => $collection->Collection[$i]->slide3,
            'image4' => $collection->Collection[$i]->slide4,
        );
    }

JSON: {

"Collection":[

    {
        "range_id":1,
        "heading":"Pheonix",
        "slide1":"keyholebraandknickers2.jpg",
        "slide2":"wiredbrawithknickers2.jpg",
        "slide3":"wiredbrawithknickers3.jpg",
        "slide4":"xbraandsuspenderthong1.jpg"
    },

    {   
        "range_id":2,
        "heading":"Sophia",
        "slide1":"keyholecrossoverbraletandknickers1.jpg",
        "slide2":"keyholecrossoverbraletandknickers3.jpg",
        "slide3":"keyholecroptopandbriefs1.jpg",
        "slide4":"bustierandbriefs1.jpg"
    },

    {
        "range_id":3,
        "heading":"Lily",
        "slide1":"deepvbody2.jpg",
        "slide2":"braletandlacemeupbriefs1.jpg",
        "slide3":"pleatedwiredbraandbriefs4.jpg",
        "slide4":"deepvbody3.jpg"   
    },

    {
        "range_id":4,
        "heading":"Pearl",
        "slide1":"croptopandbriefs4.jpg",
        "slide2":"croptopandbriefs2.jpg",
        "slide3":"halftrianglecupbody3.jpg",
        "slide4":"wiredbody2.jpg"
    }       

]

}





?>

css: 

#collWrap{
display: grid;
padding: 0.83em;
grid-template-columns: repeat(2, 1fr);/*Currently set up for 2 in one 
line, 4 seems too cramped */
grid-column-gap: 0.83em;
border: 0.08em solid red;
}

.collFrac{
border: 0.08em solid blue;
padding: 0.83em;
margin: 0.83em;
}
.collFrac h3{
text-align: center;
margin-bottom: 0.5em;
font-size: 2em;
font-weight: lighter;
border-top: 0.08em solid #ffffff;
border-bottom: 0.08em solid #ffffff;
}

.collFrac img{
width: 100%;
display: block;
height: auto;
}

Результат Vardump:

array (4) {[0] => array (6) {["id"] => int (1) ["heading"] => string (7) "Pheonix" ["image1"] =>string (26) "keyholebraandknickers2.jpg" ["image2"] => string (25) "wiredbrawithknickers2.jpg" ["image3"] => string (25) "wiredbrawithknickers3.jpg" ["image4"] => string (26) "xbraandsuspenderthong1.jpg"} [1] => array (6) {["id"] => int (2) ["heading"] => string (6) "Sophia" ["image1"] =>string (38) "keyholecrossoverbraletandknickers1.jpg" ["image2"] => string (38) "keyholecrossoverbraletandknickers3.jpg" ["image3"] => string (28) "keyholecroptopandbriefs1.jpg" ["image4"] => string (21) "bustierandbriefs1.jpg"} [2] => array (6) {["id"] => int (3) ["heading"] => string (4) "Lily" ["image1"] =>string (14) "deepvbody2.jpg" ["image2"] => string (28) "braletandlacemeupbriefs1.jpg" ["image3"] => string (29) "pleatedwiredbraandbriefs4.jpg" ["image4"] => string (14) "deepvbody3.jpg"} [3] => array (6) {["id "] => int (4) [" heading "] => string (5)" Pearl "[" image1 "] => string (21)" croptopandbriefs4.jpg "[" image2 "] => string (21)"croptopandbriefs2.jpg" ["image3"] => string (24) "halftrianglecupbody3.jpg" ["image4"] => string (14) "wiredbody2.jpg"}}

...