vue中图片获取失败原由

静态获取成功显示

<div class="zw" v-for="item in compList">
        <a href="javaScript:">
            <img src="../../assets/img/img.jpeg" height="300" width="320" alt="Loading..." />
          <p align="center">{{ item.title }}</p>
        </a>
      </div>

动态获取不显示

<div class="zw" v-for="item in compList">
        <a href="javaScript:">
            <img :src="../../assets/'+item.imgUrl" height="300" width="320" alt="Loading..." />
          <p align="center">{{ item.title }}</p>
        </a>
      </div>

动态获取显示

<div class="zw" v-for="item in compList">
        <a href="javaScript:">
            <img :src="require('../../assets/'+item.imgUrl)" height="300" width="320" alt="Loading..." />
          <p align="center">{{ item.title }}</p>
        </a>
      </div>

原由（1）        src和:src的区别

        src和:src都用于在HTML中指定资源链接

        区别：src是HTML元素的属性,直接指定资源链接

                :src是CSS伪类，用于选取拥有src属性且链接指向某些资源的元素

原由（2）       动态获取要加require()

        vue使用的是webpack来进行打包的，图片地址要经过处理

         webpack 支持使用 require 来加载模块，src使用require能正确的将图片进行导入和处理

       在模块化的环境下去使用require导入图片时，webpack会对图片进行一些处理：

                1、优化文件大小: 可以根据配置对图片进行优化压缩

                2、生成URL: webpack 会为图片生成一个URL（不使用require动态获取图片不显示的根本原由）

                3、模块化引入: 将图片资源作为模块引入，便于操作和管理图片资源。