[SOLVED] Change value src of img from data (framewor7-cli)

1

Hi All,

I am using the framework7-cli. I have the following data:
products: [
{
id: ‘1’,
image: ‘…/img/iphone8.png’,
title: ‘Apple iPhone 8’,
description: ‘Apple iPhone 8.’
},
{
id: ‘2’,
image: ‘…/img/iphone8Plus.png’,
title: ‘Apple iPhone 8 Plus’,
description: ‘Apple iPhone 8 Plus.’
},
{
id: ‘3’,
image: ‘…/img/iphoneX.png’,
title: ‘Apple iPhone X’,
description: ‘Apple iPhone X.’
},
]

I’m trying to display the information from one product. My concern is I want to put the value of product.image to the src of img. Here is my code:

image
I were able to display the title and description. Requesting for your guidance.

TIA,

Huteng

2

You can just fill element attributes from your data:

<img src="{{product.image}}">

I usually do something like this to show placeholders if an item doesn’t have an image. But that depends on your data.

<img src="{{#if product.image}}product.image{{else}}placeholder.png{{/if}}>

1 Like
3

@Tim, i tried your answer. The image does not display but I think my error right now is not on your answer but on where to save those images and how to access them. I save them on “…/src/assets/…png” of the project folder. Thank you.

4

If you are using webpack then you have to import those images so webpack can proceed and copy them, e.g.:

<template>
  <div class="page">
    ...
    <img src="{{logoSrc}}">
  </div>
</template>
<script>
  // Relative path to image file relatively current file!
  import logoSrc from '../assets/logo.png';

  export default {
    data() {
      return {
        logoSrc,
      }
    }
  }
</script>
1 Like
5

@nolimits4web and @Tim, Thanks a lot :blush: