v-bind解析图片地址没效果

Question

vue获取到后端传递的图片地址数据(该地址是相对地址)，使用v-for遍历数据，用v-bind绑定src来解析图片地址，运行后无法显示图片，有一种解决方案是使用require，但数据很多的话就不好用了，有没有别的解决方案

Answer 1

如果图片地址是相对地址，那么需要在图片地址前面添加静态资源的根路径。可以在 Vue 实例的 created 生命周期中设置一个全局的静态资源根路径，在模板中使用 v-bind 绑定图片地址时，将静态资源根路径和图片地址拼接起来。
示例代码如下：

// 在 Vue 实例中设置静态资源根路径
created() {
  this.$staticUrl = 'http://example.com/static/';
}
// 在模板中使用 v-bind 绑定图片地址
<template>
  <div v-for="(item, index) in items" :key="index">
    <img :src="$staticUrl + item.image" alt="">
  </div>
</template>

在上面的示例代码中，首先在 Vue 实例中设置了一个静态资源根路径 this.$staticUrl，然后在模板中使用 v-for 遍历图片地址数据，使用 v-bind 绑定 img 元素的 src 属性，将静态资源根路径和图片地址拼接起来，最终生成完整的图片地址。这样就可以正确地显示图片了。