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

更新日期: 2019-01-08阅读: 5.7k标签: require

需求:如何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>


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

JS 中的require 和 import 区别

require 和 import 区别:遵循的模块化规范不一样,出现的时间不同。Require是CommonJS的语法,CommonJS的模块是对象,输入时必须查找对象属性。

关于require.context的尝试

为什么会突然用到webpack这个管理特性呢?项目某个页面需要引入N张demo图片。即资源的批量引入:如果要引入10+个以上的图片资源,就需要写10+个如下的引入代码:import XXX from ;,那如果再多一点的静态资源需要引入呢?这时候require.context就派上了用场。

require.js的使用

RequireJS是一个工具库,主要用于客户端的模块管理。它可以让客户端的代码分成一个个模块,实现异步或动态加载,从而提高代码的性能和可维护性。它的模块管理遵守AMD规范,模块与模块之间可以互相依赖,当然可能会有人会想,模块之间的依赖

export,export default,module.exports,import,require之间的区别和关联

Node应用由模块组成,采用CommonJS模块规范。根据这个规范,每个文件就是一个模块,有自己的作用域。在这些文件里面定义的变量、函数、类,都是私有的,对外不可见,因此规避掉了作用域污染。

require,exports和module.exports的区别

require 的运行机制和缓存策略你了解吗?require 加载模块的是同步还是异步?谈谈你的理解exports 和 module.exports 的区别是什么?require 加载模块的时候加载的究竟是什么?

js中require和import的区别

当前端应用越来越复杂时,我们想要将代码分割成不同的模块,便于复用、按需加载等。require 和 import 分别是不同模块化规范下引入模块的语句,下文将介绍这两种方式的不同之处。

require后面不加default会报错

在项目中用 require(./Download.vue) 引入一个组件的时缺少.default 会报错:Failed to mount component: template or render function not defined

用了这么久的 require,你真的懂它的原理吗?

我们常说node并不是一门新的编程语言,他只是javascript的运行时,运行时你可以简单地理解为运行javascript的环境。在大多数情况下我们会在浏览器中去运行javascript,有了node的出现

如何为 Node.js 的 Require 函数添加钩子?

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境。早期的 Node.js 采用的是 CommonJS 模块规范,从 Node v13.2.0 版本开始正式支持 ES Modules 特性

require加载器实现原理

人们常说node并不是一门新的编程语言,他只是javascript的运行时,运行时你可以简单地理解为运行javascript的环境。在大多数情况下会在浏览器中去运行javascript,有了node的出现,可以在node中去运行javascript

点击更多...

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