关闭

vue中的js引入图片,必须require进来

时间: 2019-01-08阅读: 3858标签: vue

需求:如何components里面的index.vue怎样能把assets里面的图片拿出来。 


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

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


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

<el-carousel-item v-for="item in carouselData" :key="item.id">
        <img :src="item.url"/>
        <span>{{ 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>
        <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" >-->

                </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>


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1797

关闭

Vue.js中 watch 的高级用法

上面的代码的效果是,当我们输入firstName后,wacth监听每次修改变化的新值,然后计算输出fullName。app.$watch调用后会返回一个值,就是unWatch方法,你要注销 watch 只要调用unWatch方法就可以了

谈谈vue的render函数?

使用vue 这么长时间,对vue 对源码了解还是不多,作为一个不甘平庸的前端小白,决定奋起,那么今天我们就来谈谈vue 的render 函数;打开源码,我发现render 函数返回一个VNode; 可是我们并未在模版中写render 呀,这又是一个什么样的过程呢?

如何用vue制作一个探探滑动组件【转】

嗨,说起探探想必各位程序汪都不陌生(毕竟妹子很多),能在上面丝滑的翻牌子,探探的的堆叠滑动组件起到了关键的作用,下面就来看看如何用vue写一个探探的堆叠组件

简单理解vue中的$nextTick

Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后使用$nextTick,则可以在回调中获取更新后的DOM(dom的改变是发生在nextTick()之后),这个方法作用是当数据被修改后使用这个方法

Vue最佳实践

Vue 最佳实践,是参考 Vue 官方风格指南并根据过去 Vue 实际项目开发中的经验总结的一套规范建议。本项目的目的是希望每个 Vue 开发者都能尽快熟悉并上手项目代码,志在帮助 Vue 新手开发者及时避免一些不规范的设计和由此而引发的问题

Vue项目使用CDN优化首屏加载

将引用的外部js、css文件剥离开来,不编译到vendor.js中,而是用资源的形式引用,这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来,达到加速首开的目的。外部的库文件,可以使用CDN资源,或者别的服务器资源等。

vue-router响应路由参数的变化

当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用

Vue.js最佳实践:五招让你成为Vue.js大师

本文面向对象是有一定Vue.js编程经验的开发者。如果有人需要Vue.js入门系列的文章可以在评论区告诉我,有空就给你们写。对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发前端网站

Vue响应式开发,深入理解Vue.js响应式原理

深入理解Vue.js响应式原理。Vue教程有关的视频都讲到,我习惯响应式开发,在更早的Angular1时代,我们叫它:数据绑定(Data Binding)。你只需要在Vue实例的 data() 块中定义一些数据,并绑定到HTML

VueJS 实际开发中会遇到的问题

VueJS 实际开发中会遇到的问题,主要写一些 官方手册 上没有写,但是实际开发中会遇到的问题,需要一定知识基础。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!