Hello everyone, I’m Daotin, captain of the front end, want to get more exciting content of the front end, pay attention to me (the whole network name), unlock the front end growth new posture.

The following text:


This article is the result of a problem with introducing local images into vue files today.

Normally, one of our IMG tags would say something like this in HTML:

<img src=".. /images/demo.png">

Copy the code

This notation can only refer to images in relative paths. Absolute paths cannot be used. Using the absolute path, the resource will be copied directly without being processed by WebPack.

If SRC is a variable, we would normally use a variable SRC in data for dynamic binding.

<img :src="src">SRC data() {return {SRC: '.. /images/demo.png' } }Copy the code

However, at this time, you will find that the image is not loaded, the image is not displayed, by looking at the address of the image is displayed. /images/demo.png, which means that relative paths bound via v-bind are not processed by WebPack’s file-loader, only simple text replacement is performed.

So what do we do?

The solution

1. Convert the image to base64 format

<img src="data:image/png; base64,iVBYKIGloxxxxxxxxxxxxxxxxxxx...">

Copy the code

The general picture is relatively small can do this, such as icon icon, the size is generally less than 10KB.

2, use **import** to import images

<img :src="src">// Import img from '.. SRC data() {return {SRC: img}}Copy the code

3, use **require** dynamic loading

<img :src="src">SRC data() {return {SRC: require('.. /images/demo.png') } }Copy the code

4. Introduce **publicPath** and splice it in the path to realize the dynamic change of the introduced path

<img :src="publicPath + 'images/demo.jpg'" alt="">// compile:<img src="/foo/images/demo.jpg" alt="">
<script>
export default: {data(){
        return {
          publicPath: process.env.BASE_URL,
        }
    },
}
</script>

Copy the code

Configure publicPath in vue.config.js:

//vue.config.js
module.exports = {
    publicPath:'/foo/'. }Copy the code

conclusion

Static resources can be processed in two ways:

  • Is imported in JavaScript or referenced by a relative path in template/CSS. Such references are handled by WebPack.

  • Placed in a public directory or referenced by an absolute path. Such resources will be copied directly and not processed by WebPack.

The principle of

Import from a relative path

When you use relative paths in JavaScript, CSS, or *.vue files (must be followed by. When a static resource is referenced, it will be included in webPack’s dependency diagram.

During its compilation, anything like , background: url (…). And CSS @import resource URLS are resolved as a module dependency.

When an absolute path is introduced, the path reads the resources in the public folder, and any static resources placed in the public folder are simply copied to the compiled directory without any special webPack treatment.

If your application is deployed at the root of a domain name, such as http://www.abc.com/, this will work. But if your application is not deployed at the root of a domain name, then you need to prefix your URL with publicPath. PublicPath is the basic URL used to deploy application packages. You need to configure it in vue.config.js.

extension

About Vue file-loader vs URl-loader

If we want to include images in the page (including img’s SRC and background URLS). When we were developing based on WebPack, there were some problems with bringing in images.

One of them is the problem of reference paths. As we all know, WebPack eventually packages modules into a single file, so the URL path in our style is relative to the entry HTML page, not relative to the path of the original CSS file. This will cause the image to fail. This problem is solved by using file-Loader, which can parse url imports (not limited to CSS) in the project, copy the image to the appropriate path according to our configuration, and then modify the file reference path after packaging to point to the correct file according to our configuration.

In addition, if there are many images, there will be a lot of HTTP requests, which will degrade the performance of the page. This problem can be resolved by url-loader. Url-loader will encode the imported images and generate a dataURl. It is equivalent to translating picture data into a string of characters. Then you package that string into a file, and eventually you just need to import that file to access the image. Of course, coding costs performance if the image is large. Therefore, url-Loader provides a limit parameter. Files smaller than the limit byte are converted to the DataURl, and files larger than the limit are copied using file-Loader.

** Url -loader – file-loader ** In short, url-loader encapsulates file-loader. Url-loader does not depend on file-Loader. That is, when url-loader is used, only URl-Loader needs to be installed, but file-Loader does not need to be installed, because url-loader has built-in file-loader. From the above introduction, we can see that URL-loader works in two cases: 1. If the file size is smaller than limit, url-Loader will convert the file to a DataURL. 2. If the file size is larger than the limit, url-Loader will call file-Loader for processing and pass the parameters directly to file-Loader. So we just need to install urL-Loader.

The original link: www.cnblogs.com/weizaiyes/p…

About the background URL when the image is imported

Following the above theory, webPack will require an image if I import it in a relative path.

background: url('./iphonexs.png') 0 0 no-repeat;

Copy the code

In fact, I saw the background of the page change to:

background: url(/resources/dist/images/iphonexs.a25bee7.png) 0 0 no-repeat;


Copy the code

This is the result of processing according to the configuration of url-Loader.

Or use dynamic style:

<div 
  :style="{'background': 'url(' + require('./iphonexs.png') + ') 0 0 no-repeat'}">
</div>

Copy the code

Reference

  • Cli.vuejs.org/zh/guide/ht…

  • Segmentfault.com/a/119000001…

  • Github.com/vuejs/vue-c…

(after)

If there is any problem, please help me to point it out. Thanks!

— End —

Hi, I’m Daotin, leader of the front end, and I’m focused on sharing front end and cognition. I hope to share my front-end learning and working experience with you here, and record my personal growth.

Want to get more front end exciting content, pay attention to me (full network name), unlock the front end growth new posture.