<commit_before><template>
    <div class="ion-img img" :class="{'img-loaded':isLoaded,'img-unloaded':!isLoaded}" :src="src"
         :style="{'width':w,'height':h}">
        <transition name="fade">
            <img v-show="isLoaded" ref="img" :alt="alt" :src="srcValue" :width="w" :height="h">
        </transition>
    </div>
</template>
<style lang="less">
    @import "img";

    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s
    }

    .fade-enter, .fade-leave-active {
        opacity: 0
    }
</style>
<script type="text/javascript">
  /**
   * @component Img
   * @description
   *
   * ## 其他 / Img图片加载组件
   *
   * ### 介绍
   *
   * Img组件, 用于实现Img按需加载的功能. 当滚动到将要显示的位置的时候再加载图片
   *
   * ### 注意
   *
   * - Img组件只能在Content组件中使用!
   * - 当滚动到确定位置后, img未下载完则有滚动到别处, 这样的请求也会被中断
   * - 当图片加载完毕, 滚动超过阈值则隐藏不显示, 这样做是为了降低内存使用
   *
   *
   * ### 如何引入
   * ```
   * // 引入
   * import Img from 'vimo/lib/img'
   * // 安装
   * Vue.component(Img.name, Img)
   * // 或者
   * export default{
   *   components: {
   *    Img
   *  }
   * }
   * ```
   *
   * @props {String} [alt='image']         - 图片的alt属性
   * @props {(Number|String)} [height=0]   - 图片的高度
   * @props {String} src                   - 图片的src地址
   * @props {(Number|String)} [width=0]    - 图片的宽度
   *
   * @demo #/img
   * @usage<commit_msg>docs: Image组件文档整理<commit_after><template>
    <div class="ion-img img" :class="{'img-loaded':isLoaded,'img-unloaded':!isLoaded}" :src="src"
         :style="{'width':w,'height':h}">
        <transition name="fade">
            <img v-show="isLoaded" ref="img" :alt="alt" :src="srcValue" :width="w" :height="h">
        </transition>
    </div>
</template>
<style lang="less">
    @import "img";

    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s
    }

    .fade-enter, .fade-leave-active {
        opacity: 0
    }
</style>
<script type="text/javascript">
  /**
   * @component Img
   * @description
   *
   * ## 其他 / Img图片加载组件
   *
   * ### 介绍
   *
   * Img组件, 用于实现Img按需加载的功能. 当滚动到将要显示的位置的时候再加载图片
   *
   * ### 注意
   *
   * - Img组件**只能在Content组件**中使用!
   * - 当滚动到确定位置后, img未下载完但又滚动到别处, 这样的请求也会被中断
   * - 当图片加载完毕, 滚动超过阈值则隐藏不显示, 这样做是为了降低内存使用
   *
   * ### 如何引入
   * ```
   * // 引入
   * import Img from 'vimo/lib/img'
   * // 安装
   * Vue.component(Img.name, Img)
   * // 或者
   * export default{
   *   components: {
   *    Img
   *  }
   * }
   * ```
   *
   * @props {String} [alt='image']         - 图片的alt属性
   * @props {(Number|String)} [height=0]   - 图片的高度
   * @props {String} src                   - 图片的src地址
   * @props {(Number|String)} [width=0]    - 图片的宽度
   *
   * @demo #/img
   * @usage
{'fraction_non_alphanumeric': 0.1887504718761797, 'fraction_numerical': 0.003020007550018875, 'mean_word_length': 2.1547619047619047, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 23, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1166464', 'n_tokens_mistral': 1236, 'n_tokens_neox': 1309, 'n_words': 170}