vue中引入图片

vue中引入图片

方式一

直接在img标签里面直接写上路径

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

 

 

方式二

使用require或者引用网络地址

<img :src="imgList.imgSrc" >

 

<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},
                    # 错误❌ 该写法，会导致动态解析绑定的地址就是 ../../images/1.png，服务启动会导致该资源找不到，
　　　　　　　　　　　　# 和方式一最大的区别，方式一打包自动转换地址，该方式则不会，图片地址就是../../images/1.png
                    // {id: 1, imgSrc: "../../images/1.jpg"},
                    // {id: 2, imgSrc: "../../images/2.jpg"},
                    // {id: 3, imgSrc: "../../images/3.jpg"},
　　　　　　　　　　　　　　
　　　　　　　　　　　　//正确动态绑定图片地址的操作
                    # 正确✅
                    {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>