You can use
photo components to display JPG, PNG, or GIF images in your article.
photo components are optimized for photographs, and other Apple News Format components are better for figures or logos.
You’ll place a
photo component in the article’s
components array. Earlier in this tutorial, you learned that a
role is a property that conveys a component’s semantic value and function in the article. For any
photo component, the value of the
role property is
URL property can point to an image in the same directory as your
article.json file, using the URL
bundle://<filename>.<extension>, or it can refer to a remote image, such as
For information on customizing
photo components, see Photo in the Apple News Format Reference.
JSON Example: Photo Component
...) indicate lines of code that have been omitted from this example.
At any time, you can try changing property values in your
article.json file, and then use News Preview to see how these changes impact the look of your article.
For example, try changing the URL of your article’s
In your code, find the photo component in the
In the photo component, find the
Replace the value of the
"bundle://header.jpg", with the URL of an image on your website.
article.jsonfile in News Preview. See also: Updating Your Article Preview.
photocomponent now displays your image.