How to introduce img images into Vue pages

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:
  • Detailed explanation of several ways to introduce image paths in Vue.js
  • Vue's three image import code examples
  • How to introduce pictures more elegantly in Vue pages

<<:  HTML table markup tutorial (39): The bright border color attribute of the header BORDERCOLORLIGHT

>>:  MySQL transaction autocommit automatic commit operation

Recommend

Implement 24+ array methods in JavaScript by hand

Table of contents 1. Traversal Class 1. forEach 2...

Details of Linux file descriptors, file pointers, and inodes

Table of contents Linux--File descriptor, file po...

js implements single click to modify the table

Pure js implements a single-click editable table ...

Web Design TabIndex Element

TabIndex is to press the Tab key to sequentially o...

Detailed explanation of nmcli usage in CentOS8

Common nmcli commands based on RHEL8/CentOS8 # Vi...

Do you know how to use vue-cropper to crop pictures in vue?

Table of contents 1. Installation: 2. Use: 3. Bui...

Detailed explanation of MySQL delayed replication library method

Simply put, delayed replication is to set a fixed...

JS ES new feature of variable decoupling assignment

Table of contents 1. Decoupled assignment of arra...

MySQL column to row conversion, method of merging fields (must read)

Data Sheet: Column to row: using max(case when th...

JavaScript implements password box input verification

Sometimes it is necessary to perform simple verif...

Implementing a random roll caller based on JavaScript

This article shares the specific code of JavaScri...

JavaScript canvas to achieve code rain effect

This article shares the specific code for canvas ...

Summary of 11 common mistakes made by MySQL call novices

Preface You may often receive warning emails from...