How to reference pictures in assets folder in Vue project (Summary of methods)

Referring pictures in assets folders in Vue projects can be done in the following ways:

1. Quoting in the template

exist.vueThe template part of the file can be used to reference images using relative paths. For example:

<template>
  <img src="@/assets/" alt="Text describing the picture">
</template>

here@is an alias configured in the Vue CLI, pointing tosrcTable of contents. so@/assets/That meanssrcIn the directoryassetsIn the folderpicture.

2. Quoting in CSS

In a CSS file, you can use relative paths to reference images as background images, etc. For example:

.class-name {
  background-image: url('~@/assets/');
}

Similarly, here~@/assets/Indicates a quotesrcIn the directoryassetsPictures in folder.

3. Quoting in JavaScript

In the script section of the Vue component, you can useimportStatements to import image resources and use them where needed. For example:

import image from '@/assets/';
export default {
  data() {
    return {
      imgSrc: image,
    };
  },
};

Then it can be used in the templatev-bindBind this variable to display the image:

<template>
  <img :src="imgSrc" alt="Text describing the picture">
</template>

This is the article about how to quote pictures (summary of methods) in the Vue project. For more related vue citations of pictures in the assets folder, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!