使用vue实现轮播图的时候，使用v-for发现获取不到图片？两种解决办法！

原创

于 2021-06-07 11:36:22 发布 · 1.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue

在使用Vue实现轮播图时遇到图片无法显示的问题，原因是webpack打包时为图片路径添加了哈希值。解决方法包括：1) 使用`require`动态引入图片，2) 使用`import`导入图片。这两种方法都能确保图片路径的正确性，从而在页面上正常显示。

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

先将有问题的代码贴出来：

<template>
    <div class="videomenu">
        <div class="left">
            <!-- 轮播图 -->
                <a href=""><img v-for="(item,index) in imgs" :key="index" :src="item" v-show="index==options"></a>
            <!-- 轮播图下方的按钮 -->
            <ul class="list">
                <li v-for="(src,index) in imgs" :key="index" :class="index==options?'selected':''" @click="gotoPage(index)">{
  
  {index+1}}</li>
            </ul>
        </div>
        <div class="right">
            <ul class="rightul">
                <li class="rightulitem" v-for="(item,index) in list" :key="index"><a href="" class="righta"></a></li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name:'VideoMenu',
    data(){

最低0.47元/天解锁文章

200万优质内容无限畅学