vue2动态获取图片路径的加载问题

 created() {
    const id = this.$route.params.id;
    this.id = id;
    if (id === "Porifera" || id === "Hexactinelida" || id === "Demospongiae") {
      this.parentNode = "Sponge";
    }

    console.log(this.parentNode, this.id);
    this.imgSrc = require(`assets/${this.parentNode}/${this.id}/${this.id}.jpg`);
  },

点击一个组件的时候,会把图片的路径参数传过来,如果不用require,就是加载不出来的

初始化数据

  <img :src="imgSrc" alt="" />

。。。

webpack太菜了。还是得猛学,学海无涯了属于是

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中,如果你想要动态获取图片路径,可以使用v-bind指令来绑定img的src属性。然而,有一些问题可能会导致图片加载不出来。 一种情况是,通过v-bind绑定的相对路径不会被Webpack的file-loader处理,只会做简单的文本替换。这意味着,如果你使用相对路径来指定图片的位置,图片可能无法正确加载出来。这个问题可以通过引入publicPath并将其拼接在路径中来解决。你可以在img标签中使用v-bind指令来动态绑定publicPath和图片路径,以实现引入路径动态变动。例如,可以这样写:<img :src="publicPath + 'images/demo.jpg'" alt="">。在编译后,路径会被替换成正确的路径:<img src="/foo/images/demo.jpg" alt=""> 另一种方法是使用require函数来动态加载图片。在data中定义一个变量来存储图片路径,然后在img标签中使用v-bind指令绑定这个变量。例如,可以这样写:<img :src="src">,然后在data中定义变量src并使用require函数来获取图片路径。这样可以确保图片能够正确加载出来。例如,可以这样定义变量src:data(){ return { src: require('../images/demo.png') } }。 总结起来,Vue动态获取图片的方法有两种: 1. 使用v-bind指令和publicPath来动态拼接图片路径。 2. 使用require函数来动态加载图片。 希望这些方法能够帮助你解决动态获取图片问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值