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

时间: 2019-01-08阅读: 4230标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

理解vue中计算属性computed,以及使用场景

在vue中,计算属性是用于自动监听依赖值的变化,从而动态返回内容,监听是一个过程,在监听的值变化时,可以触发一个回调,并做一些事情。其特点:

Vue基于snabbdom做了哪些事

Snabbdom 核心代码大约只有 200 行。它提供了模块化架构,具有丰富的功能,可通过自定义模块进行扩展。在了解核心 patch 前,需要先了解 snabbdom 的模块化架构思想。

关于Vue.use()使用详解

相信很多人在用Vue使用别人的组件时,会用到 Vue.use() 。例如:Vue.use(VueRouter)、Vue.use(MintUI)。但是用 axios时,就不需要用 Vue.use(axios),就能直接使用。那这是为什么呐?

Vue基础之计算属性

设想一个场景,你需要得到一个复杂运算/逻辑的返回值,利用模板内的表达又过长且难以阅读和维护,这时计算属性就可以很好的解决你的问题。看下面的例子:

如何理解vue中的v-bind?

若不是动态属性,首先为其增加驼峰化后的监听,然后再为其增加一个连字符的监听,例如v-bind:foo-bar.sync,首先v-on:update:fooBar,然后v-on:update:foo-bar。v-on监听是通过addHandler加上的。

vue watch监听对象的使用_实现首次不触发、深度监听

vue中的watch是一个对象,所以一定要当成对象来用,它有键-值组成,其中键就是你要监控的那个数据。这篇文章介绍:vue如何实现首次不触发watch,vue如何实现数据的深度监听?

谈谈vue的render函数?

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

vue中慎用style的scoped属性

在vue组件中,为了使样式私有化(模块化),不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块,这是一个非常好的举措,但是为什么要慎用呢?因为scoped往往会造成我们在修改公共组件(三方库或者项目定制的组件)的样式困难,需要增加额外的工作量

Vue常用经典开源项目汇总参考-海量

本文主要是收集与整理Vue相关的开源资料,以供需要的朋友参考。主要包含以下几方面的内容:UI组件、开发框架、实用库、服务端、辅助工具、应用实例、Demo示例

Vue中的scoped及穿透方法

由于scoped看起来很美好,但是含有很多的坑,所以,不推荐不使用scoped属性,而通过在外层dom上添加唯一的class来区分不同组件。这种方法既实现了类似于scoped的效果,又方便修改各种第三方组件的样式,代码看起来也相对舒适

点击更多...

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