Vue中使用props结合v-bind:src时图片无法显示的问题

核心问题 #

1. 静态资源路径未被正确解析：Vue模板中通过v-bind:src绑定相对路径时，webpack不会自动处理字符串形式的路径，导致浏览器无法找到图片资源，仅显示占位符。
2. 索引越界与数据不同步：
   • 你在data中初始化img1时仅执行一次，当父组件传入的imageleft变化时，img1不会同步更新；
   • 父组件传入imageleft="2"，但ImagesLeft数组只有2个元素（索引0、1），取索引2会得到undefined，导致图片路径无效。
3. 模板中无需使用this：Vue模板的上下文已经是组件实例，直接访问属性即可，this是多余的。

修复后的代码 #

Block.vue

<template>
    <div>
        <h1>{{ computedImageSrc || '无有效图片' }}</h1>
        <!-- 用v-if判断路径是否有效，避免渲染无效img标签 -->
        <img v-if="computedImageSrc" :src="computedImageSrc" alt="区块图片">
    </div>
</template>

<script>
export default {
    name: 'SmallBlock',
    props: ['title', 'imageleft', 'imageright'],
    computed: {
        computedImageSrc() {
            const imgIndex = parseInt(this.imageleft);
            // 校验索引合法性：非数字、负数、超出数组长度都返回null
            if (isNaN(imgIndex) || imgIndex < 0 || imgIndex >= this.ImagesLeft.length) {
                return null;
            }
            // 用require包裹路径，让webpack正确解析静态资源
            return require(`../assets/${this.ImagesLeft[imgIndex]}`);
        }
    },
    data() {
        return {
            // 仅存储相对于assets目录的路径片段，方便require拼接
            ImagesLeft: ['pics/4.jpg', 'meme_pics/4.jpg']
        }
    }
}
</script>

App.vue（调整传入的索引值，避免越界）

<template>
  <div class="wrapper-out">
    <div class="wrapper-in">
      <Block title="0" imageleft="0" imageright="0"/>
      <!-- 原imageleft="2"超出数组长度，改为合法索引1 -->
      <Block title="2" imageleft="1"/>
    </div>
    <div class="wrapper-in">
      <Block title="1" imageleft="1" imageright="1"/>
      <!-- 原imageleft="3"超出数组长度，改为合法索引0 -->
      <Block title="3" imageleft="0"/>
    </div>
    <Content v-show="false"/>
  </div>
</template>

关键修改说明 #

• 路径解析：通过require()包裹图片路径，webpack会将其处理为编译后的实际资源URL，确保浏览器能正确加载图片。
• 响应式数据：用computed属性替代data存储索引计算结果，自动响应imageleft的变化，同时校验索引合法性，避免无效路径。
• 模板优化：用v-if替代v-show，当路径无效时不渲染img标签，减少不必要的DOM元素。

内容的提问来源于stack exchange，提问作者Hi there