Technicalarticles

vue中的JS引入图片,必须require进来
作者:赵刘伟 时间:2020-07-24 浏览量:
需求:如何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>

返回列表

想和你做个朋友

DO U LIKE?