Vue 在data中引入图片路径报错？

vue项目中在data设置图片路径，template中引入后页面无法显示图片，浏览器控制台报错，路径没问题还是找不到原因：

看了 紫裳博主的文章才知因为Vue里动态生成的路径无法被url-loader解析到

方法一：直接将图片源文件放在项目目录的static文件，正常写就可以；     

<div v-for="(item, index) in imgSrc" :key="index">

    <img :src="item.url" alt="">

</div>

           

data() {

    return {

        imgSrc: [

            {

              url: '../../static/images/clean.png',

              text: ‘'保洁服务'’

            },

            {

              url: '../../static/images/moon.png',

              text: '保姆'

            }
        ]
    }

  } 

 

方法二：通过import将图片源路径引入；

import clean from '../assets/img/clean.png'
import moon from '../assets/img/moon.png'

imgSrc: [
    {
        position: '保洁服务',
        url: clean
     },
     {
        position: '保姆',
        url: moon
     }
]

方法三.采用背景图做法，通过data将图片源路径引入，利用内联样式。如下代码所示：

        <div :style="imgStyle"></div>

        data () {

             imgStyle: {

                  backgroundImage：`url(${require('@/assets/images/xxx.png')})`

             }

        }