求助帖~~~~好心人看过来

最新推荐文章于 2022-06-07 14:13:01 发布

weixin_40137191

最新推荐文章于 2022-06-07 14:13:01 发布

阅读量501

点赞数

CC 4.0 BY-SA版权

文章标签：求助帖 html vue element ui

本文链接：https://blog.youkuaiyun.com/weixin_40137191/article/details/84969747

博主初涉前端，尝试在HTML中直接使用ElementUI的走马灯组件，但遇到图片无法显示的问题。代码中引入了Vue和ElementUI库，展示了具体的使用方式，包括组件的绑定和数据传递。

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

求助帖，请大佬教教我如何在html中直接使用element ui组件（下面有我源代码，用了一个走马灯，但是无法显示图片，我还是个弟弟，刚开始接触前端，希望大家帮帮我~~~）

<!DOCTYPE html>
<html lang="en-us">
<head>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <style>
        td {
            text-align: center
        }
    </style>
    <table border="1" width="100%" height="100" style="table-layout:fixed;">
        <tr>
            <td>
                <img src="D:\fm_FrontSide\fm_source\QQ图片20181211215455.jpg" width="130" height="100">
            </td>
            <td>
                <a href="">关于我们</a>
            </td>
            <td>
                <a href="">联系我们</a>
            </td>
            <td>

                <a href=""> 登陆 </a>
            </td>
            <td>
                <a href=""> 注册 </a>
            </td>
        </tr>
    </table>
    <div id="roll">
        <el-container>
            <el-main>
                <el-carousel height="500" trigger="click" arrow="always" typeof="card">
                    <el-carousel-item v-for="img in imgList" :key="index">
                        <img v-bind:src="img.url">
                    </el-carousel-item>
                </el-carousel>
            </el-main>
        </el-container>
    </div>
    <script>
        new Vue({
            el: '#roll',
            data: function () {
                return {
                    imgList: [
                        { url: require('./fm_source/IMG_0066.JPG') },
                        { url: require('./fm_source/IMG_0080.JPG') }
                    ]
                }
            },
            components: {
            }
        })
    </script>
</body>
</html>

这是我的项目结构
在这里插入图片描述