vue中 data引入图片的几种方式

键盘打烂月入过万

于 2023-01-05 11:15:12 发布

阅读量3k

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_67271921/article/details/128559762

版权

文章展示了在前端开发中如何使用CommonJS规范和JS模块化来处理图片数组的循环展示。第一种方法利用Vue.js的v-for指令结合事件处理函数实现，第二种方法通过模板语法直接导入图片资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种CommonJS规范写法

这里我需要循环图片的数组展示，所以是这种形式

 <div class="radio-desc">

          <div v-for="(item, index) in typeApp" :key="item.id" :label="item.type" class="radio-item" @click="imgclick(item.id, item.type, index)">

            <img class="contentimg" :src="item.img" />

            <img v-show="currentIndex == index" class="darkdraw" :src="item.activereImg" />

          </div>

        </div>

第二种 JS模块化引入

<template>

<img :src="imgs">

</template>

<script>

import img from 'xxx.png'

export default {

data () {

return {

imgs: img

}

}

}