How to make vue display two pictures in one line

To display two images in one row in vue, you can use Flex layout. Flex layout is a very flexible layout method that can easily implement various complex layout requirements.

Below, I will introduce how to use Flex layout to display two pictures in one row in vue.

1. Create a vue project and install the required dependencies

First, use vue-cli to create a vue project in the terminal:

vue create project-name

Then, in Install the required dependencies in the project root directory:

npm install vue-flexbox --save

2. Introduce vue-flexbox component library

vue-flexbox is a vue component library based on Flex layout, which can be easily Achieve various layout effects. Introduce vue-flexbox into the project:

import VueFlexbox from 'vue-flexbox';

Vue.use(VueFlexbox);

3. Write vue component code

In the vue component, you can use the layout component in vue-flexbox to achieve one-line display The effect of two pictures. The code is as follows:

<template>
  <div class="container">
    <vf-layout justify="space-between">
      <vf-layout-item>
        <img src="/path/to/image1.jpg">
      </vf-layout-item>
      <vf-layout-item>
        <img src="/path/to/image2.jpg">
      </vf-layout-item>
    </vf-layout>
  </div>
</template>

<script>
export default {
  name: 'ImageLayout',
}
</script>

<style>
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
</style>

In the above code, we use a vue component named ImageLayout, in which we create a

npm run serve