关闭

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

时间: 2019-01-08阅读: 3623标签: 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

关闭

Vuejs讲解之:响应式、过渡效果、过渡状态

Vue是一套构建用户界面的JS渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。讲解js高级之响应式、过渡效果、过渡状态。

vue框架开发出现页面空白、白屏的解决方法总汇

使用Vue-cli脚手架开发单页应用时出现页面空白的情况:1.npm run build打包页面空白,2. iOS的Safari下无法打开网页,3.升级vue2+部分手机访问出现页面空白,4.升级vue2+IP访问页面空白,5.Vue在IE下显示空白问题,6.Vue只在iOS 10出现白屏问题

谈谈vue的render函数?

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

Vue 的 .sync 修饰符

.sync 修饰符算是 Vue 的所有修饰符中较难理解的一个,本篇文章就带你走近 .sync 的世界,深入理解后会发现,其实也就那么回事。修饰符和指令息息相关,下面从 指令 -> 修饰符 -> .sync 修饰符 由浅入深地来讲解 .sync 的含义及用法。

Vue 3.0 对 Web 开发意味着什么?

Vue的创建者Evan You向我们展示了Vue 3.0 —— 这是不断上升的Javascript框架的最新版本。这些优化使Vue更高效,更模块化且更易于使用。我将讨论这些变化以及我认为的他们将在Vue 3.0发布后对现有开发产生的影响。

vue扩展——使用vue插件添加全局方法属性

在使用vue构建一些大型项目的时候,会发现许多组件会共用到一些函数或常量,我们需要把它提取出来,每次需要的时候调用一次就可以了,避免每个组件都重新写再一篇的麻烦。

vue引用js文件的多种方式

vue引用js文件的多种方式,这里以为引入jquery为例。js引入文件方式包括: vue-cli webpack全局引入jquery、vue组件引用外部js的方法、单vue页面引用内部js方法

vue项目中vux的使用

VUX 是基于 WeUI 和 Vue.js 的 移动端 UI 组件库,提供丰富的组件满足移动端(微信)页面常用业务需求。在vue-cli中使用步骤如下:vux2必须配合vux-loader使用,并配置build/webpack.base.conf.js

vue去掉#,history模式

现在网站大多有三方登录,支付等功能,存在#,项目开发就存在很大的障碍。vue把#当做自己的根目录,静态资源,去掉#后,要采用相对路径去引用,如果图片引用是在js内,则要采用require()方法进行引用。

vue2.0/3.0在main.js引入scss文件报错

在vue2.0的main.js中引入scss文件报错原因是:在build文件夹下的webpack.base.conf.js的rules里面添加配置,vue3.0写入.scss文件在mian.js中 import ‘./styles/index.scss‘后出现下图报错解决方法:在vue.config.js文件中添加以下代码

点击更多...

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