vue中本地静态图片路径写法

<img src="/UploadFiles/2021-04-02/a1.png">

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


<el-carousel-item v-for="item in carouselData" :key="item.id">
    <img :src="/UploadFiles/2021-04-02/item.url">

效果如下：
index.vue里面的完整代码是这个：


<template>
 <div>  <div class=" block">
  <el-carousel class="carouselBlock">
   <el-carousel-item v-for="item in carouselData" :key="item.id">
    <img :src="/UploadFiles/2021-04-02/item.url">

PS：下面看下Vue.js中的图片引用路径
当我们在Vue.js项目中引用图片时，关于图片路径有以下几种情形：
使用一
我们在data里面定义好图片路径
imgUrl:'../assets/logo.png'
然后，在template模板里面


<<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">img src="/UploadFiles/2021-04-02/
{{imgUrl}}">

这样是错误的写法，我们应该用v-bind绑定图片的srcs属性
:src="/UploadFiles/2021-04-02/imgUrl">

或者


<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">img src="/UploadFiles/2021-04-02/logo.png">

这种方式是按照正常HTML语法引用路径，放在模板里可以被webpack打包出来。
使用二
当我们需要在js代码里面写图片路径的时候，如果我们在data里面写
imgUrl:'../assets/logo.png'
此时webpack只会把它当做字符串处理从而找不到图片地址，此时我们可以使用import引入图片路径：


:src="/UploadFiles/2021-04-02/avatar">

在data里面定义
avatar: avatar
情形三
我们也可以把图片放在外层的static文件夹里面，然后在data里面定义：


imgUrl ： '../../static/logo.png'
:src="/UploadFiles/2021-04-02/imgUrl">

以上就是我们在Vue.js中引用图片路径的方式。

            
           
            上一篇：webpack+vuex+axios 跨域请求数据的示例代码

            下一篇：webpack配置导致字体图标无法显示的解决方法

        
    

    
一句话新闻
一文看懂荣耀MagicBook Pro 16
荣耀猎人回归！七大亮点看懂不只是轻薄本，更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象：要么轻薄但性能一般，要么性能强劲但笨重臃肿。然而，今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上，荣耀宣布猎人游戏本正式回归，称其继承了荣耀 HUNTER 基因，并自信地为其打出“轻薄本，更是游戏本”的口号。
众所周知，寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验，而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起，我们不禁对它产生了强烈的好奇：作为代表荣耀猎人游戏本的跨界新物种，它究竟做了哪些平衡以兼顾不同人群的各类需求呢？
    
    

        
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 SiteMap
    
    

        

            

                
首页
                
破解
                
音乐
                
影视