Vue's local static image path-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

Vue's local static image path

Mar 27, 2018 pm 05:48 PM

picture path static

This time I will bring you the local static image path of vue. What are the precautions when using vue’s local static image path. The following is a practical case, let’s take a look.

Write picture description here

Requirement: How can the index.vue in components take out the pictures in assets.

1. Write the path directly in the img tag :

&lt;img src=&quot;../assets/a1.png&quot; class=&quot;&quot; width=&quot;100%&quot;/&gt;

Copy after login

2. Use an array to save and recycle the output:

&lt;el-carousel-item v-for=&quot;item in carouselData&quot; :key=&quot;item.id&quot;&gt;
    &lt;img :src=&quot;item.url&quot; class=&quot;carouselImg&quot;/&gt;
    &lt;span class=&quot;carouselSpan&quot;&gt;{{ item.title }}&lt;/span&gt;
&lt;/el-carousel-item&gt;
data: () =&gt; ({
   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}
   ]
  }),

Copy after login

The effect is as follows:

The complete code in index.vue is this:

<template>
 <p>  <p class=" block">
  <el-carousel class="carouselBlock">
   <el-carousel-item v-for="item in carouselData" :key="item.id">
    <img :src="item.url" class="carouselImg"/>
    <span class="carouselSpan">{{ item.title }}</span>
   </el-carousel-item>
  </el-carousel>
  </p>
 <footer1></footer1>
 &lt;img src=&quot;../assets/a1.png&quot; class=&quot;&quot; width=&quot;100%&quot;/&gt;
 </p>
</template>
<script>
  import footer1 from '../components/public/footer'
  export default {
  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}
   ]
  }),
  components:{
      footer1
    },
 }
</script>
<style lang="scss">
  @import '../style/mixin';
  .carouselBlock{
    width: 100%;
    height: REM(300);
    position:relative;
    .carouselImg{
    height: REM(300);
    width:100%;
   }
   .carouselSpan{
    position: absolute;
    bottom: REM(20);
    left: REM(20);
    font-size: REM(24);
    font-weight: bold;
   }
  }
  .el-carouselcontainer{
    width: 100%;
    height: REM(300);
  }
 .el-carouselitem h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  margin: 0;
 }
 .el-carouselitem:nth-child(2n) {
   background-color: #99a9bf;
 }
 .el-carouselitem:nth-child(2n+1) {
   background-color: #d3dce6;
 }
</style>

Copy after login

PS: Let’s take a look at the image reference path in Vue.js

When we reference images in the Vue.js project, there are the following situations regarding the image path:

Use one

We define it in the data Image path

imgUrl:'../assets/logo.png'

Then, in the template template

&lt;&lt;span class=&quot;hljs-title&quot; style=&quot;box-sizing: border-box; color: rgb(0, 0, 136);&quot;&gt;img src="
{{imgUrl}}"&gt;

Copy after login

This is the wrong way to write it , we should use v-bind to bind the srcs attribute of the image

:src="imgUrl">

&lt;span class=&quot;hljs-title&quot; style=&quot;box-sizing: border-box; color: rgb(0, 0, 136);&quot;&gt;img src="../assets/logo.png"&gt;

Copy after login

this way It refers to the path according to the normal HTML syntax and can be packaged by webpack when placed in the template.

Use 2

When we need to write the image path in the js code, if we write

imgUrl in the data: '../assets/logo.png'

At this time webpack will only treat it as a string and cannot find the image address. At this time we can use import to introduce the image path:

:src="avatar" /&gt;
import avatar from '@/assets/logo.png'

Copy after login

Define in data

avatar: avatar

Case 3

We can also put the picture outside In the static folder of the layer, then define it in data:

imgUrl ： '../../static/logo.png'
:src="imgUrl" /&gt;

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!