【vue项目图片路径的使用】

最新推荐文章于 2024-03-26 15:43:28 发布

夏目-Moon

最新推荐文章于 2024-03-26 15:43:28 发布

阅读量666

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_40692642/article/details/132497746

版权

在template 中使用assets中的图片


<template>
    <div class="wrapper">
        <div class="item" v-for="item, index in list" :key="index" draggable="true"  @dragstart="dragStart(item,index)" @dragover.prevent="dragOver(index)" @drop="dragEnd()"
             >
            <!-- {{ item.name }} -->
            <img  style="width:100%;height:100%;" :src="item.imgUrl" alt="">
        </div>
    </div>
</template>



 list: [
                {
                    name: "1",
                    imgUrl:require(`@/assets/images/1.jpeg`)
                }, {
                    name: "2",
                    imgUrl: require(`@/assets/images/2.jpeg`)
                }, {
                    name: "3",
                    imgUrl: require(`@/assets/images/3.jpeg`)
                }, {
                    name: "4",
                    imgUrl: require(`@/assets/images/5.jpeg`)
                }, {
                    name: "5",
                    imgUrl: require(`@/assets/images/6.jpeg`)
                }, {
                    name: "6", 
                    imgUrl: require(`@/assets/images/7.jpeg`)
                }, {
                    name: "7",
                    imgUrl: require(`@/assets/images/8.jpg`)
                }, {
                    name: "8", 
                    imgUrl: require(`@/assets/images/9.jpg`)
                }
            ],

在template 中使用public中的图片(相对路径)

<template>
    <div class="wrapper">
        <div class="item" v-for="item, index in list2" :key="index" draggable="true"  @dragstart="dragStart(item,index)" @dragover.prevent="dragOver(index)" @drop="dragEnd()"
             >
            <!-- {{ item.name }} -->
            <img  style="width:100%;height:100%;" :src="item.imgUrl" alt="">
        </div>
    </div>
</template>


   list2: [
                {
                    name: "1",
                    imgUrl:"../../static/images/1.jpeg" 
                }, {
                    name: "2",
                    imgUrl: "../../static/images/1.jpeg"
                }, {
                    name: "3",
                    imgUrl: "../../static/images/1.jpeg"
                }, {
                    name: "4",
                    imgUrl: "../../static/images/1.jpeg"
                }, {
                    name: "5",
                    imgUrl: "../../static/images/1.jpeg"
                }, {
                    name: "6",
                    imgUrl: "../../static/images/1.jpeg"
                }, {
                    name: "7",
                    imgUrl: "../../static/images/1.jpeg"
                }, {
                    name: "8",
                    imgUrl: "../../static/images/1.jpeg"
                }
            ],

3.在css中使用assets中的图片（相对路径）

.wrapper {
    height: 100%;

    .item {
        background: url('../assets/images/1.jpeg') no-repeat;
        background-size: cover;
        height: 250px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        /* width: 25%; */
        /* float: left; */
        /* padding: 24px 16px 0; */
        /* margin-bottom: 6px; */
        /* height: 250px; */
        width: 25%;
        float: left;
        padding: 24px 16px 0;
        margin-bottom: 6px;
        box-sizing: border-box;
    }
}

4.在css中使用public中的图片（相对路径）

.wrapper {
    height: 100%;

    .item {
        background: url("../../public/static/images/1.jpeg") no-repeat;
        background-size: cover;
        height: 250px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        /* width: 25%; */
        /* float: left; */
        /* padding: 24px 16px 0; */
        /* margin-bottom: 6px; */
        /* height: 250px; */
        width: 25%;
        float: left;
        padding: 24px 16px 0;
        margin-bottom: 6px;
        box-sizing: border-box;
    }
}