img使用 :src 动态绑定图片地址，图片不成功

佩淇呢

已于 2024-04-12 11:55:42 修改

阅读量1.1k

点赞数 2

分类专栏： Vue2 文章标签：前端 javascript vue.js

于 2024-04-12 11:55:21 首次发布

本文链接：https://blog.youkuaiyun.com/m0_67880202/article/details/137675243

版权

Vue2 专栏收录该内容

10 篇文章

订阅专栏

文章描述了在使用VueCLI创建的Vue2项目中，尝试通过`:src`动态绑定图片地址实现轮播效果时遇到的404错误，解决方法是通过`require`引入图片。作者对比了动态绑定和写死图片地址的情况，以及如何正确处理静态资源路径问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用vue cli 创建的vue2项目，项目中想实现轮播效果。

出现的问题：

使用 :src 动态绑定图片地址，图片没有出现

          <el-carousel :interval="3000" arrow="always">
            <el-carousel-item v-for="(item,index) in swipperImg" :key="index">
             <img :src="item.imgUrl" alt="">
            </el-carousel-item>
          </el-carousel>

 data() {
    return {
      swipperImg:[
        {
          imgUrl:'../../assets/animals1.jpeg'
        },
        {
          imgUrl:'../../assets/animals2.jpg'
        },
        {
          imgUrl:'../../assets/animals4.jpg'
        },
        {
          imgUrl:'../../assets/animals5.jpg'
        },
        {
          imgUrl:'../../assets/animals7.jpeg'
        },
      ]
    }
  },

此时图片没有出现，控制台报错 http://localhost:8080/assets/animals1.jpeg 404 (Not Found)

当图片地址写死时，图片出现：

          <el-carousel :interval="5000" arrow="always">
            <el-carousel-item >
             <img src="../../assets/animals1.jpeg" alt="">
            </el-carousel-item>
          </el-carousel>

此时控制台中出现的图片地址是http://localhost:8080/img/animals1.dc0540de.jpeg

解决办法：

使用require引入图片，完整代码如下，此时图片引入成功

<template>
  <div class="">
        <div class="pt100 carousel">
          <el-carousel :interval="5000" arrow="always">
            <el-carousel-item v-for="(item,index) in swipperImg" :key="index">
             <img :src="item.imgUrl" alt="">
            </el-carousel-item>
          </el-carousel>
        </div>
  </div>
</template>

<script>
export default {
  name:"",
  data() {
    return {
      swipperImg:[
        {
          imgUrl: require('../../assets/animals1.jpeg')
        },
        {
          imgUrl: require('../../assets/animals2.jpg')
        },
        {
          imgUrl: require('../../assets/animals4.jpg')
        },
        {
          imgUrl: require('../../assets/animals5.jpg')
        },
        {
          imgUrl: require('../../assets/animals7.jpeg')
        },
      ]
    }
  },
}
</script>