Implementing local static image paths in vue (detailed tutorial)

This article introduces you to how to write local static image paths in Vue and how to reference image paths in Vue.js. Friends who need it can refer to it

Write image descriptions here

Requirement: How can index.vue in components take out pictures from 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(&#39;../assets/a1.png&#39;),title:&#39;你看我叼吗1&#39;,id:1},
   {url:require(&#39;../assets/a3.png&#39;),title:&#39;你看我叼吗2&#39;,id:2},
   {url:require(&#39;../assets/a4.png&#39;),title:&#39;你看我叼吗3&#39;,id:3}
   ]
  }),

The effect is as follows:

index The complete code in .vue is this:

<script>
  import footer1 from &#39;../components/public/footer&#39;
  export default {
  data: () => ({
   carouselData:[
   {url:require(&#39;../assets/a1.png&#39;),title:&#39;你看我叼吗1&#39;,id:1},
   {url:require(&#39;../assets/a3.png&#39;),title:&#39;你看我叼吗2&#39;,id:2},
   {url:require(&#39;../assets/a4.png&#39;),title:&#39;你看我叼吗3&#39;,id:3}
   ]
  }),
  components:{
      footer1
    },
 }
</script>

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

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

Use one

We define the image path in the data

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 binds 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 method is quoted according to normal HTML syntax The path, placed in the template, can be packaged by webpack.

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to change a certain value in the data requested by vue

Detailed explanation of using vue-cli scaffolding Initialize the project structure under the Vue project

Vue and vue-i18n are combined to implement multi-language switching method of background data

The above is the detailed content of Implementing local static image paths in vue (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!