How to introduce img images into Vue pages

When we learn HTML, the image tag <img> introduces images

<img src="../assets/images/avatar.png" width="100%">

But this has two disadvantages:

Because the absolute path is used for import, if the directory of the following picture is moved, the path in src needs to be modified
If this image is used in multiple places on the same page, it needs to be imported multiple times, and the image directory has been moved, so the src path needs to be modified in so many places.

what to do? Use dynamic path import and require

First, let's talk about these two brothers. Before ES6, JS did not have its own module syntax. In order to solve this embarrassment, require.js was created. After ES6 was released, JS introduced the concept of import.

Import using import

After importing, you need to register it in data, otherwise it will not be displayed

<script>
import lf1 from '@/assets/images/cityOfVitality/lf1.png'
import lf2 from '@/assets/images/cityOfVitality/lf2.png'
import lf3 from '@/assets/images/cityOfVitality/lf3.png'
import lf4 from '@/assets/images/cityOfVitality/lf4.png'
import lf5 from '@/assets/images/cityOfVitality/lf5.png'
import lf6 from '@/assets/images/cityOfVitality/lf6.png'
import lf7 from '@/assets/images/cityOfVitality/lf7.png'
import top1 from '@/assets/images/cityOfVitality/icon_top1.png'
import mixins from './mixins'
export default {
  name: 'LeftPiece',
  mixins: [mixins],
  data () {
    return {
      lf1,
      lf2,
      lf3,
      lf4,
      lf5,
      lf6,
      lf7,
      top1
    }
  }
}
</script>

Import using require

<script>
import top1 from '@/assets/images/cityOfVitality/icon_top1.png'
import mixins from './mixins'
export default {
  name: 'RightPiecr',
  mixins: [mixins],
  data () {
    return {
      rt1: require('@/assets/images/cityOfVitality/rt1.png'),
      rt2: require('@/assets/images/cityOfVitality/rt2.png'),
      rt3: require('@/assets/images/cityOfVitality/rt3.png'),
      rt4: require('@/assets/images/cityOfVitality/rt4.png'),
      rt5: require('@/assets/images/cityOfVitality/rt5.png'),
      rt6: require('@/assets/images/cityOfVitality/rt6.png'),
      top1
    }
  }
}
</script>

This is the end of this article about how to introduce img images into Vue pages. For more relevant content about how to introduce img images into Vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in: