Why cannot show the url image?

[ghost]

Why cannot show the url image?

I follow your example but not work?

data() { return { options: { targetRowHeight: 250 }, items: [{ width: 250, height: 400, url: 'https://source.unsplash.com/featured/250x400?green,blue' }, { width: 300, height: 400, url: 'https://source.unsplash.com/featured/250x400?green,blue' }] }; },

[b4dnewz]

Can you post any browser error or reproduce it in a plunkr or another tool like it?

With the code you posted I've very few information to understand what might is not working.

[ghost]

Thanks you for your reply

I just solve the problem in the "close issue"

I want to ask something is about responsive

I try to add a listener for resize , but look like not have effect

when my container is up to 992px the layout will like this

I need add which setting can make look like this layout if the container is small than 768, the layout will look like this, else bigger than will not look like

<vue-justified-layout :items="jLayout02.imageList" :options="jLayout02.options">
  <template slot="inner" slot-scope="{item}">
    <img :src="item.url" style="width:inherit; height:inherit">
  </template>
</vue-justified-layout>

export default {
  name: "JustifiedLayout",
  data() {
    return {
      jLayout02: {
        imageList:[{
          width: 720,
          height: 800,
          url: "/img/home/520x800.jpg"
        },{
          width: 1050,
          height: 735,
          url: "/img/home/1050x735.jpg"
        }],
        options: {
          targetRowHeight: 250,
          // fullWidthBreakoutRowCadence: true
        }
      },
    };
  },
  components: {
    VueJustifiedLayout,
  },
  methods: {
    onResize () {
      this.$set(this.jLayout02.options, 'containerWidth', this.$el.clientWidth);
      this.$emit('update:options', this.jLayout02.options);
    }
  },
  mounted () {
    this.$set(this.jLayout02.options, 'containerWidth', this.jLayout02.options.containerWidth || this.$el.clientWidth)
    window.addEventListener('resize', this.onResize)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.onResize)
  }
};

[b4dnewz]

Hi, i'm not sure if I understood correctly what is your problem but, the plugin will listen for element resize by itself, see the code and update the containerWidth in user provided options and it will recalculate the best geometry for the layout.

If you want you can play with the targetRowHeight to encrease/reduce the number of rows, than other view results are purely based on the images sizes (or rateo)

[ghost]

OK I just upload to server for demo http://sicgal.com/

when try to responsive why the screen is large (bigger than 1200 ) then the second row will not full width that the mean cannot like a photo wan to the layout in 768px will look like in to the photo (layout)

[b4dnewz]

Ok now I undestand.. actually I'm not sure about the solution, but i'm sure about the "problem". Since the first image has a width of 1xxx it will be displayed as wide as possible on wider screens, you have two options here I think:

First option

Add a aspectRatio: x property to your items array for example:

imageList:[{
          width: 720,
          height: 800,
          url: "/img/home/520x800.jpg"
},{
          width: 1050,
          height: 735,
          aspectRatio: 0.5,  // <-- this line should reduce the image ratio
          url: "/img/home/1050x735.jpg"
}],

Second option

I see in the flickr official documentation that exist an option called forceAspectRatio you should try it, maybe in combination with the first option.

<vue-justified-layout :items="imagesList" :options="{
  forceAspectRatio: true
}"></vue-justified-layout>

I didn't have tested it and I think it's not a project issue (i think) it depends to the images you want to display.

Can you test one or both of the code above? I'll be glad to help further if possible.

[ghost]

OK, I understand, is fixed the problem

just first time make a this layout, thank you for your help