Retrieving an image as a directive

[vergarm]

@jvandemo - is it possible to retrieve an image from contentful as a directive or do i have to use the service for that? Thanks!

<img contentful-entry="'6KntaYXaHSyIw8M6eo26OK'" src="$contentfulEntry.fields.url"/>

[jvandemo]

@vergarm — You can access an image right from the Contentful data indeed, e.g.:

<ul contentful-entries="content_type=dog">
  <li ng-repeat="dog in $contentfulEntries.items | orderBy:'fields.name' ">
    <h1>{{ dog.fields.name }}</h2>
    <img ng-src="{{ dog.fields.image.fields.file.url }}" />
  </li>
</ul>

[vergarm]

@jvandemo - can i access the image without looping?
like this:
<img contentful-asset="'6KntaYXaHSyIw8M6eo26OK'" ng-src="$contentfulEntry.image.fields.url"/>``

[jvandemo]

@vergarm — Yes, you should be able to do something like:

<div contentful-entry="'6KntaYXaHSyIw8M6eo26OK'">
  <img src="{{ $contentfulEntry.fields.image.fields.file.url}}"
</div>

where image is the name of the field in your Contentful entry. So if you have an image field called avatar, this would be something like:

<div contentful-entry="'6KntaYXaHSyIw8M6eo26OK'">
  <img src="{{ $contentfulEntry.fields.avatar.fields.file.url}}"
</div>

Does that make sense? Thanks!

[vergarm]

Thanks! that worked :-)

[jvandemo]

@vergarm — Super, thank you for the confirmation.