zoukankan      html  css  js  c++  java
  • 动态改变静态资源路径

    动态改变静态资源路径

    正常使用如img标签时静态资源是固定的,无法进行改变或者在变量中定义赋值

    如我们想实现如下需求,在for循环中动态改变src的图片明,达到改变的目的

    //错误用法
    <img v-for="i in 10" :src="`@/images/image-${i}.jpg`)" :key="i">
    
    //图片无法找到
    //图片在未赋值时已被引入渲染,渲染后才进行赋值,当然会提示找不到图片,那么如何解决呢?
    

    首先我们要明白vue的编译处理方法,明白原理才能更好的解决问题

    <img src="../image.png">
    //上面的代码片段将会被编译为:
    
    createElement('img', {
      attrs: {
        src: require('../image.png') // 现在这是一个模块的请求了
      }
    })
    

    那么我们是否可以在src过程中直接把图片作为模块引入,引入时改变变量名,而非编译时再作为模块引入?

    //成功渲染
    <v-img v-for="i in 10" :src="require(`@/images/image-${i}.jpg`)" :key="i">
    


    单枪匹马你别怕,一腔孤勇又如何,这一路你可以哭,但不能怂!

    ——  Here are lovecode3000 ~

  • 相关阅读:
    CodeForces
    CodeForces
    CodeForces
    HDU 6704 K-th occurrence(后缀数组,主席树,st表,二分)
    AcWing 1004. 品酒大会 (后缀数组,并查集)
    Gym
    codeforces 2100左右的DS题 做题记录
    P4768 [NOI2018] 归程 做题记录
    CSP 2021 智熄记
    「随笔」论打羽毛球的正确姿势
  • 原文地址:https://www.cnblogs.com/lovecode3000/p/14429434.html
Copyright © 2011-2022 走看看