记录（十二）关于vue3导入图片应注意的一个问题

最新推荐文章于 2024-08-08 15:22:16 发布

史上最强最恶の大怪兽

最新推荐文章于 2024-08-08 15:22:16 发布

阅读量152

点赞数 2

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/2301_76468244/article/details/140306506

版权

这是我在开发时候遇到的一个问题，先看图。

这是代码

<template>
    <div class="tz-box">
        <div class="title">
            <i>
                <img src="../assets/img/yqljs.png" alt="">
            </i>
            "创意"
        </div>
        <ul class="td-list">
    <li v-for="item in items" :key="item.id" style="margin-bottom: 25px;">
      <a :href="item.href" :title="item.title" style="font-size:14px;line-height:16px;">
        <img :src="item.imgSrc" alt="" class="img">
        <br>
        {{ item.text }}
      </a>
    </li>
  </ul>
    </div>
</template>
<script setup>
import a from '@/assets/img/202201.png';
import b from '@/assets/img/202202.png';
import c from '@/assets/img/202203.png';
import d from '@/assets/img/202204.png';
import e from '@/assets/img/202205.png';
import f from '@/assets/img/202206.png';

const items = [
  { id: 1, href: '', title: '智慧校园', imgSrc: '@/assets/img/202201.png', text: '品西安文化醇香' },
  { id: 2, href: '', title: '智慧校园', imgSrc: '@/assets/img/202202.png', text: '开开心心踏青去' },
  { id: 3, href: '', title: '智慧校园', imgSrc: '@/assets/img/202203.png', text: '成为正能量同路人' },
  { id: 4, href: '', title: '智慧校园', imgSrc: d, text: '巾帼英姿 自成光芒' },
  { id: 5, href: '', title: '智慧校园', imgSrc: e, text: '英雄回家' },
  { id: 6, href: '', title: '智慧校园', imgSrc: f, text: '旅美大熊猫' }
];


</script>
<style scoped lang="scss">
.tz-box {
    width: 425px;
    
}
.title {
    position: relative;
    padding-left: 45px;
    font-size: 26px;
    font-weight: 700;
    color: #31499a;
    margin-top: 20px;
    margin-bottom: 20px;
    
}
.title i {
    position: absolute;
    left: 0;
    top: 50%;
    height: 40px;
    margin-top: -20px;
    display: block;
    
}
.td-list {
    margin: 0 -20px;
    text-align: center;

}
.td-list li {
    float: left;
    width:120px;
    
    list-style: none;
    display: list-item;
    text-align: -webkit-match-parent;
    //border: 1px solid red;
}
.td-list li a {
    display: inline-block;
    color: #333;
    background-color: transparent;
    text-decoration: none;
    box-sizing: border-box;
}
.img{
    width: 110px;
    height: 120px;
    margin-left: 10px;
    margin-right: 10px;
}
</style>

可以看到图片的导入是不一样的，vue3和vue2的图片导入方式是不一样的，之前我一直出错误，后来在网上一直找资料，才发现这个问题，所以我想要分享出来。