vue中使用v-for渲染本地图片地址

最新推荐文章于 2024-03-26 16:56:40 发布

m0_59325389

最新推荐文章于 2024-03-26 16:56:40 发布

阅读量809

点赞数 1

分类专栏：项目问题文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_59325389/article/details/125450285

版权

项目问题专栏收录该内容

2 篇文章 0 订阅

订阅专栏

问题：vue中使用v-for渲染本地图片地址。

出现问题：使用静态地址渲染不出来。

解决方案：使用require将图片进行引入。

使用require原因：在vue中使用静态地址，在编译后，浏览器会将地址转成base64的形式，使用变量进行引入，浏览器不会将其转换成base64的形式，没有报错，但是图片也不会显示出来。因此使用require进行引入，浏览器会将其转换成base64，成功引入图片。

<template>
  <div>
  <el-carousel :interval="4000" type="card" height="200px">
    <el-carousel-item v-for="(item,index) in datalist" :key="index">
      <img :src="item" alt="">
    </el-carousel-item>
  </el-carousel>
  </div>
</template>
<script>
export default {
  name: 'bannercv',
  data () {
    return {
        datalist:[
          // 正确使用
          require("../assets/logo"),
          require("../assets/logo"),
          require("../assets/logo"),
          // '../assets/logo.png',
          // '../assets/logo.png',
          // '../assets/logo.png', 错误写法
        ]
    }
  },
}
</script>