SoFunction
Updated on 2025-04-03

Writing local static image path in vue

Write a picture description here

Requirements: How to take out the pictures in the components?

1. Write the path directly in the img tag:

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

2. Use array to save the recycled output:

&lt;el-carousel-item v-for="item in carouselData" :key=""&gt;
    &lt;img :src="" class="carouselImg"/&gt;
    &lt;span class="carouselSpan"&gt;{{  }}&lt;/span&gt;
&lt;/el-carousel-item&gt;
data: () =&gt; ({
   carouselData:[
   {url:require('../assets/'),title:'Do you think I'm 1',id:1},
   {url:require('../assets/'),title:'Do you think I'm 2',id:2},
   {url:require('../assets/'),title:'Do you think I'm 3',id:3}
   ]
  }),

The effects are as follows:

The complete code inside is this:

&lt;template&gt;
 &lt;div&gt;  &lt;div class=" block"&gt;
  &lt;el-carousel class="carouselBlock"&gt;
   &lt;el-carousel-item v-for="item in carouselData" :key=""&gt;
    &lt;img :src="" class="carouselImg"/&gt;
    &lt;span class="carouselSpan"&gt;{{  }}&lt;/span&gt;
   &lt;/el-carousel-item&gt;
  &lt;/el-carousel&gt;
  &lt;/div&gt;
 &lt;footer1&gt;&lt;/footer1&gt;
 &lt;img src="../assets/" class="" width="100%"/&gt;
 &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
  import footer1 from '../components/public/footer'
  export default {
  data: () =&gt; ({
   carouselData:[
   {url:require('../assets/'),title:'Do you think I'm 1',id:1},
   {url:require('../assets/'),title:'Do you think I'm 2',id:2},
   {url:require('../assets/'),title:'Do you think I'm 3',id:3}
   ]
  }),
  components:{
      footer1
    },
 }
&lt;/script&gt;
&lt;style lang="scss"&gt;
  @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-carousel__container{
    width: 100%;
    height: REM(300);
  }
 .el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  margin: 0;
 }
 .el-carousel__item:nth-child(2n) {
   background-color: #99a9bf;
 }
 .el-carousel__item:nth-child(2n+1) {
   background-color: #d3dce6;
 }
&lt;/style&gt;

PS: Let's look at the image reference path below

When we reference images in our project, there are several situations regarding the image path:

Use one

We define the image path in data

imgUrl:'../assets/'

Then, inside 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/">

This method is to refer to the normal HTML syntax and place it in a template and can be packaged by webpack.

Use two

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

imgUrl:'../assets/'

At this time, webpack will only process 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/'

Definition in data

avatar: avatar

Situation Three

We can also place the picture in the outer static folder and then define it in data:

imgUrl ： '../../static/'
:src="imgUrl" />

The above is how we reference the image path in it.