Как код JavaScript для доступа к изображению из файла JSON? - PullRequest
Новая
       5

Как код JavaScript для доступа к изображению из файла JSON?

0 голосов
/ 19 сентября 2019

Я должен создать циклы для вывода нескольких изображений со стилем.У меня проблемы с правильным синтаксисом и путем к изображениям.

Я пытался сделать это с относительным путем (см. Файл JavaScript ниже), но я все еще не могу увидеть вывод изображений в HTML.

Это мой файл JSON (photos.json) 

const content = `
{
      "id":"3a5c5da5-5a12-4d2b-b0dd-abc28eaf810b",
      "title":"British Museum",
      "description":"The library in the British Museum in London. The British Museum Reading Room, situated in the centre of the Great Court of the British Museum, used to be the main reading room of the British Library. In 1997, this function moved to the new British Library building at St Pancras, London, but the Reading Room remains in its original form at the British Museum.",
      "location":{
         "iso":"GB",
         "country":"United Kingdom",
         "city":"London",
         "cityCode":2643743,
         "continent":"EU",
         "latitude":51.519148,
         "longitude":-0.126826
      },
      "filename":"5855729828.jpg",
      "colors":[
         {
            "hex":"#a9b490",
            "name":"Norway"
         },
         {
            "hex":"#bab984",
            "name":"Pine Glade"
         },
         {
            "hex":"#71735c",
            "name":"Finch"
         },
         {
            "hex":"#332625",
            "name":"Wood Bark"
         },
         {
            "hex":"#b99a5d",
            "name":"Barley Corn"
         }
      ]
   }
...

Это мой файл HTML.И я не должен ничего добавлять в этот файл. 

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Lab 8</title>
   <link href="https://fonts.googleapis.com/css?family=Oswald:300,500" rel="stylesheet">   
   <link rel="stylesheet" type="text/css" href="css/lab08.css" />


</head>
<body>
<main id="test4">
  <header>
    <h1>Test Your Knowledge #4</h1>
  </header>  
  <section>
      <script src="js/photos.json"></script>
      <script src="js/lab08-test04.js"></script>

  </section>
</main>
</body>
</html>

И это пока мой файл Javascript ... HTML-файл находится в главной папке, изображения находятся в другой папке с именем "images", поэтому я попытался использовать путь images / img.jpg, чтобы получить изображение на JavaScript, но не смог, пожалуйста, помогите. 

const photos = JSON.parse(content);

document.write('<img src="' + photos[0].filename + '">');

Это не работает, но этот код работает, но я не хочу так делатьпотому что я должен использовать петли:

document.write('<img src="images/5855729828.jpg">');

Спасибо!

Ответы [ 2 ]

0 голосов
/ 19 сентября 2019

Попробуйте: в HTML-файле добавьте: <img src="" id="imgtag" /> и в js-файле добавьте этот код: 

const imgtag = document.querySelector("#imgtag");
imgtag.src = content.filename
0 голосов
/ 19 сентября 2019

Я попробовал еще раз, используя ваш JSON, результат 5855729828.jpg Возможно, вы можете попробовать еще раз 

<script src="content.json"></script>
<script type="text/javascript">
    let test = JSON.parse(content);
    document.write('<img src="'+test.filename+'">');
   console.log(test.filename);
</script>

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...