vue项目中img动态导入的问题

相信有些人应该都会遇到vue项目中动态加载图片的问题。就是觉得路径没有问题，但是还是报错。

错误代码template：

<el-card v-for="(o,s_i) in styleList" :key="s_i">
            <div><img style="width: 100%; height: 100px" :src="o.url" fit="cover" :alt="o.name"></div>
            <span>{{ o.name }}</span>
</el-card>

script：

data(){
    return{
        styleList:[
    {
          name: '风格1',
          url: '@/assets/home/111.jpg'
        },
  {
          name: '风格2',
          url: '@/assets/home/222.jpg'
        },
]
    }
}

其实这样肯定是会报错的，因为webpack会将图片当模块使用。但是因为上面图片是动态加载的，所以url-loader无法解析图片路径，执行npm run dev或者npm run build之后导致路径没有被加工。

解决思路：将图片作为模块加载进去，这样webpack将能将它解析，或者将资源放在static目录下。

解决办法一：

<script>
import img1 from '../assets/home/1.png'
import img2 from '../assets/home/2.png'
import img3 from '../assets/home/3.png'

export default {
  data () {
    return {
      style: [
　　　　{
          name: '风格1',
          url: img1
        },
        {
          name: '风格2',
          url:img2
        },
      ]
    }
  }
}
</script>

解决办法二：

<script>
export default {
  data () {
    return {
      style: [
　　　 {
          name: '风格1',
          url: require('../assets/home/111.png')
        },
        {
          name: '风格2',
          url: require('@/assets/home/222.png')
        },
      ]
    }
  }
}
</script>