Vue's local static image path

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 :

<img src="../assets/a1.png" class="" width="100%"/>

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

<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>
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}
   ]
  }),

The effect is as follows:

The complete code in index.vue is this:

<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>

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

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

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

:src="imgUrl">

or

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

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" />
import avatar from '@/assets/logo.png'

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" />

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!

Recommended reading:

How jQuery+koa2 implements Ajax requests

How to deal with the misalignment of iview's select drop-down box options

The above is the detailed content of Vue's local static image path. For more information, please follow other related articles on the PHP Chinese website!