Home Web Front-end JS Tutorial How to reference local static images in vue

How to reference local static images in vue

Apr 11, 2018 pm 05:13 PM
picture local static

This time I will show you how to reference local static images in vue. What are the precautions for referencing local static images in vue. The following is a practical case, let's take a look.

Write picture description 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%"/>
Copy after login

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}
   ]
  }),
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 the image path in data

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

Then, in the 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"&gt;

Or

&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 method refers to the path according to normal HTML syntax and can be packaged by webpack when placed in the template.

Use two

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

in the data imgUrl:'../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

Scenario 3

We can also put the image in the outer static folder, and then define it in data:

imgUrl : '../../static/logo.png'
:src="imgUrl" /&gt;
Copy after login

The above is how we reference the image path in Vue.js.

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 to deal with Vue refreshing the display 404 after packaging the project

vue uses the xe-utils function Detailed explanation of library steps

The above is the detailed content of How to reference local static images in vue. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to solve the problem of automatically saving pictures when publishing on Xiaohongshu? Where is the automatically saved image when posting? How to solve the problem of automatically saving pictures when publishing on Xiaohongshu? Where is the automatically saved image when posting? Mar 22, 2024 am 08:06 AM

How to solve the problem of automatically saving pictures when publishing on Xiaohongshu? Where is the automatically saved image when posting?

How to post pictures in TikTok comments? Where is the entrance to the pictures in the comment area? How to post pictures in TikTok comments? Where is the entrance to the pictures in the comment area? Mar 21, 2024 pm 09:12 PM

How to post pictures in TikTok comments? Where is the entrance to the pictures in the comment area?

6 Ways to Make Pictures Sharper on iPhone 6 Ways to Make Pictures Sharper on iPhone Mar 04, 2024 pm 06:25 PM

6 Ways to Make Pictures Sharper on iPhone

How to make ppt pictures appear one by one How to make ppt pictures appear one by one Mar 25, 2024 pm 04:00 PM

How to make ppt pictures appear one by one

How to convert pdf documents into jpg images with Foxit PDF Reader - How to convert pdf documents into jpg images with Foxit PDF Reader How to convert pdf documents into jpg images with Foxit PDF Reader - How to convert pdf documents into jpg images with Foxit PDF Reader Mar 04, 2024 pm 05:49 PM

How to convert pdf documents into jpg images with Foxit PDF Reader - How to convert pdf documents into jpg images with Foxit PDF Reader

How to use JavaScript to implement the drag and zoom function of images? How to use JavaScript to implement the drag and zoom function of images? Oct 27, 2023 am 09:39 AM

How to use JavaScript to implement the drag and zoom function of images?

How to use HTML, CSS and jQuery to implement advanced functions of image merging and display How to use HTML, CSS and jQuery to implement advanced functions of image merging and display Oct 27, 2023 pm 04:36 PM

How to use HTML, CSS and jQuery to implement advanced functions of image merging and display

What should I do if the images on the webpage cannot be loaded? 6 solutions What should I do if the images on the webpage cannot be loaded? 6 solutions Mar 15, 2024 am 10:30 AM

What should I do if the images on the webpage cannot be loaded? 6 solutions

See all articles