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

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:

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



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

@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.

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

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

  export default {
    data() {
      return {
1 Like

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