zoukankan      html  css  js  c++  java
  • vue中的js引入图片,必须require进来

    需求:如何components里面的index.vue怎样能把assets里面的图片拿出来。 
    1.在img标签里面直接写上路径:

    <img src="../assets/a1.png" class="" width="100%"/>

    2.利用数组保存再循环输出:

    <el-carousel-item v-for="item in carouselData" :key="item.id">
            <img :src="item.url" class="carouselImg"/>
            <span class="carouselSpan">{{ item.title }}</span>
    </el-carousel-item>
    data: () => ({
          carouselData:[
          {url:require('../assets/a1.png'),title:'你看我叼吗1',id:1},
          {url:require('../assets/a3.png'),title:'你看我叼吗2',id:2},
          {url:require('../assets/a4.png'),title:'你看我叼吗3',id:3}
          ]
        }),

    vue中的js引入图片,必须require进来 或者引用网络地址

    <template>
        <div class="home">
            <img alt="Vue logo" src="../assets/logo.png">
            <!--<HelloWorld msg="Welcome to Your Vue.js App"/>-->
    
    
            <template>
                <el-carousel :interval="4000" type="card" height="200px">
                    <el-carousel-item v-for="item in imgList" :key="item.id">
                        <img :src="item.imgSrc" >
                        <!--<img :src="defimg" alt="">-->
    
                    </el-carousel-item>
                </el-carousel>
            </template>
    
        </div>
    </template>
    
    <script>
        // @ is an alias to /src
        // import HelloWorld from '@/components/HelloWorld.vue'
    
        export default {
            name: 'home',
            // components: {
            //     HelloWorld
            // },
            data() {
                return {
    
                    imgList: [
                # 错误❌
                        // {id: 1, imgSrc: jpg1},
                        // {id: 2, imgSrc: jpg1},
                        // {id: 3, imgSrc: jpg1},
                        # 正确✅
                        {id: 1, imgSrc: require("../assets/1.jpg")},
                        {id: 2, imgSrc: require("../assets/2.jpg")},
                        {id: 3, imgSrc: require("../assets/3.jpg")},
                        # 正确✅
                        // {id: 1,imgSrc:"https://hcdn1.luffycity.com/static/frontend/index/banner1(4)_1539945492.0492468.png"},
                        // {id: 2,imgSrc:"https://hcdn1.luffycity.com/static/frontend/index/骑士(1)_1539945488.713867.png"},
                        // {id: 3,imgSrc:"https://hcdn1.luffycity.com/static/frontend/index/banner11_1538122470.2779157.png"},
                    ]
                }
            },
        }
    </script>
  • 相关阅读:
    PS 给天空添加蓝天白云<转载>
    Study 8 —— 行块元素及定位
    Study 7 —— CSS美化背景和边框
    Study 6 —— 字体和段落属性
    Study 5 —— CSS概述
    Study 4 —— 表单标签
    Study 3 —— 表格
    Study 2 —— 图片热点区域
    Study 1 —— HTML5概述
    CentOS6.x下,tomcat
  • 原文地址:https://www.cnblogs.com/niuli1987/p/10235831.html
Copyright © 2011-2022 走看看