vue uses v-for to traverse the local picture without displaying the problem

vue uses v-for to traverse the local picture without displaying the problem

1. There is a group of local pictures in the project that need to be displayed in a loop. After using v-for traversal, it is found that the pictures cannot be displayed. The solution is as follows.

2. First of all, the normal image path is as follows, but you can't display it according to the normal path. The normal conditions of the data to be traversed are as follows.

   // Key agency task data
      toDoListDate: [
        { id: 1, name: 'About to respond timeout', number: 20, imgSrc: '../common/img/group1.webp' },
        { id: 2, name: 'About to complete timeout', number: 21, imgSrc: '../common/img/group2.webp' },
        { id: 3, name: 'Response timeout', number: 20, imgSrc: '../common/img/group3.webp' },
        { id: 4, name: 'Completion timeout', number: 23, imgSrc: '../common/img/group4.webp' },
        { id: 5, name: 'Customer reminder', number: 25, imgSrc: '../common/img/group7.webp' },
        { id: 6, name: 'Repair again', number: 27, imgSrc: '../common/img/group6.webp' },
        { id: 7, name: 'Suspend task', number: 0, imgSrc: '../common/img/group5.webp' },
      ],

3. Suppose the following method is used

 <img v-for= "item in toDoListDate" :key = "item.id" :src="item.imgSrc"alt="" srcset="">
This approach can not get local pictures, the reason is unknown, but there are solutions.

4. The solution is as follows. Use require when importing the path

  • 4.1. Here we need to change the following local picture addresses that need to traverse the data. In fact, the essence is to split the picture address into two sections and use require splicing. First modify the local data to be traversed, as follows.
    // Key agency task data
      toDoListDate: [
        { id: 1, name: 'About to respond timeout', number: 20, imgSrc: 'img/group1.webp' },
        { id: 2, name: 'About to complete timeout', number: 21, imgSrc: 'img/group2.webp' },
        { id: 3, name: 'Response timeout', number: 20, imgSrc: 'img/group3.webp' },
        { id: 4, name: 'Completion timeout', number: 23, imgSrc: 'img/group4.webp' },
        { id: 5, name: 'Customer reminder', number: 25, imgSrc: 'img/group7.webp' },
        { id: 6, name: 'Repair again', number: 27, imgSrc: 'img/group6.webp' },
        { id: 7, name: 'Suspend task', number: 0, imgSrc: 'img/group5.webp' },
      ],
  • 4.2. It can be found that the path address of the following picture is missing. Here, compare what is missing.
  • This is before
{ id: 1, name: 'About to respond timeout', number: 20, imgSrc: '../common/img/group1.webp' },
  • This is a modified version
{ id: 1, name: 'About to respond timeout', number: 20, imgSrc: 'img/group1.webp' },
  • We will find that... / common / is missing. Where is that segment going? It will be used later when you use require.

5. After modifying the local data to be traversed, we need to change the code to traverse the picture. Let's compare the code before and after,

  • 5.1. Only unmodified.
<img v-for= "item in toDoListDate" :key = "item.id" :src="item.imgSrc"alt="" srcset="">
  • This is a modified version
<img v-for= "item in toDoListDate" :key = "item.id" :src="require('../common/'+item.imgSrc)" alt="" srcset="">
  • 5.2. We will find that the picture address here has changed significantly.
  • Before: src = "item.imgSrc" followed by: src = "require('... / common /' + item.imgSrc)"
    Therefore, we know that there is less... / common / in the previous local data to be traversed. This fragment is added here.
    Use require to splice the disassembled picture address again. In this way, you can traverse and display local images.

6. Precautions

  • Here, when we split the image path address, we should pay attention to that one side is fixed and the other side is dynamic. For example, the... / common / here is unchanged, and the subsequent address will change dynamically. Therefore, it is proposed to put... / common / in require.

Tags: Front-end

Posted by uniboy86 on Mon, 02 May 2022 14:28:55 +0300