Issues related to cli using absolute path reference in vue

This article mainly introduces to you the solution to the problem of vue cli using absolute paths to reference images. The article introduces it in great detail through sample code. It has certain reference learning value for everyone's study or work. Friends who need it Let’s take a look with the editor below.

Preface

#What is Vue? It is a progressive framework for building user interfaces (explanation on the official website). What is a progressive framework? , the simple answer is that it is the least advocated. These concepts can only be seen and understood by oneself. A thousand readers will give a thousand Hamlets, but there is not much explanation. The official Vue documentation is very comprehensive.

Vue is a popular front-end framework (progressive framework) in the past two years. This article will give you a detailed introduction to the problem of using absolute paths to reference images in vue cli, and share it for your reference and study. Below Not much to say, let’s take a look together.

Text:

Using absolute paths in the page can introduce the

data (){
 return {
  src: require('IMAGES/banner.jpg')
 }
}

<img  src="/static/imghwm/default1.png"  data-src="src"  class="lazy"  : alt="Issues related to cli using absolute path reference in vue" >

style by using require() in js It seems that absolute paths cannot be used inside, unless the image resources are placed in static, and then they can be referenced like this

background: url("/static/images/banner.jpg") no-repeat;

However, after being placed in static, webpack will only copy the resources to the release directory and not the release directory. Small images are optimized to base64.

In order to take both considerations into consideration, the image resources can be optimized, so it is still not suitable to put the image resources into static. However, when writing styles in the style tag of the vue page, as the directory goes deeper, the reference path may be:

background: url("../../../images/banner.jpg") no-repeat;

There is a method that seems to save some trouble:

Put the style files into the style folder, use relative paths for style image resources, and then use the src attribute to introduce the style in the style tag, so that you can Avoid returning too many layers~~~

── src
 ── images
  ── banner.jpg
 ── style
  ── index.scss

/*style*/
background: url("../images/banner.jpg") no-repeat;

<style src="STYLE/index" lang="scss"></style>

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

Related articles:

How to add an array to an object in js

How to create a complete project process using gulp

Using axios to upload files in vue

How to make images larger in JavaScript

How to switch between styles in vue

The above is the detailed content of Issues related to cli using absolute path reference in vue. For more information, please follow other related articles on the PHP Chinese website!