vue循环绑定img图片路径加载不出来？使用这两种方法绝对好使

相信来到这里，应该是图片路径的难题困扰了你。我的图片路径明明是正确的呀！为什么图片出不来呢？其实是引入方式的问题，还是老样子，我们直接上方法。

第一种：使用require引入本地图片路径。

第二种：使用远程服务器图片路径。

第三种：（大聪明——自研失败品：可忽略不看）修改本地路径与vue项目路径保持一致。

第一种：使用require引入本地图片路径。

<template>
  <div>
    <!-- 循环遍历data中的img数据  绑定index -->
    <div v-for="(img,index) in imgData" :key="index">
      <!-- 动态绑定 -->
      <img :src="img.src" :title="img.title" :alt="img.title">
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      imgData: [
        { title: 'img1', src: require('@/assets/img/image1.jpeg') },//@相当于src
        { title: 'img2', src: require('@/assets/img/image2.jpeg') },
        { title: 'img3', src: require('@/assets/img/image3.jpeg') },
        { title: 'img4', src: require('@/assets/img/image4.jpeg') }
      ]
    };
  }
}
</script>

第二种：使用远程服务器图片路径。

<template>
  <div>
    <!-- 循环遍历data中的img数据  绑定index -->
    <div v-for="(img,index) in imgData" :key="index">
      <!-- 动态绑定 -->
      <img :src="img.src" :title="img.title" :alt="img.title">
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      imgData: [
         { title: 'img1', src: 'http://XXXX.XXX/XXXX/XXX.jpeg' },
        { title: 'img2', src: 'http://XXXX.XXX/XXXX/XXX.jpeg' },
        { title: 'img3', src: 'http://XXXX.XXX/XXXX/XXX.jpeg' },
        { title: 'img4', src: 'http://XXXX.XXX/XXXX/XXX.jpeg' }
      ]
    };
  }
}
</script>

以上两种是引入图片的两种办法。

第三种大聪明版本：在我刚开始遇到这种图片路径问题时，我引入一张正常的图片与之比较

<template>
  <div>
    <div>
       <!--正常图片-->
      <img src="./assets/img/image1.jpeg" alt="">
    </div>
       <!--动态绑定图片-->
    <div v-for="(img,index) in imgData" :key="index">
      <img :src="img.src" alt="">
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      imgData: [
        { title: 'img1', src: './assets/img/image1.jpeg' },
      ]
    };
  }
}
</script>

运行之后的结果：

 我发现正常的路径奇怪的多了一串数字，动态绑定的依旧不能显示，于是我把有数字的那个路径复制下来在编辑器里面新建一个img标签把路径引入也可以加载出来图片，但是呢，这样的有bug，有的时候重启一下项目就加载不出来了。（引入了三个img只显示两个，动态绑定没有显示出来）

总之，前两种方法就够用了，第二种方法我们也可以自己没事申请一个云服务器玩玩，阿里云服务器地址，腾讯云服务器 大概40块钱就能买一年吧，阿里学生认证也可以申请免费的云服务器，腾讯的我不太清楚，应该也是有的。好了，以上便是今天的分享，点击我的头像，查看更多相关分享。