How to process local images dynamically loaded in Vue

Find the problem

Today I encountered a problem of introducing local pictures in vue files, so I wrote this article.

Usually, our img tag is written like this in HTML:

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

This writing method can only reference images under relative paths. Absolute paths cannot be used. If you use an absolute path, such resources will be copied directly without being processed by webpack.

If src is a variable, we usually define a variable src in data for dynamic binding.

<img :src="src">

//Define the variable src in data
data() {
  return {
    src: '../images/demo.png'
   }
}

However, at this time, you will find that the image is not loaded and the image is not displayed. By checking, you will find that the address of this image is ../images/demo.png, which means that the relative path bound by v-bind will not be processed by webpack's file-loader, and only a simple text replacement will be performed.

What should I do then?

Workaround

1. Convert the image to base64 format

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

This can be done for smaller images, such as icons, which are generally less than 10KB in size.

2. Use **import** to introduce pictures

<img :src="src">

//Use import to import img from '../images/demo.png'

//Define the variable src in data
data() {
  return {
    src:img
   }
}

3. Use **require** to load dynamically

<img :src="src">

//Define the variable src in data
data() {
  return {
    src: require('../images/demo.png')
  }
}

4. Import **publicPath** and splice it into the path to realize dynamic changes of the imported path

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

Configure the publicPath path in vue.config.js:

//vue.config.js
module.exports = {
    publicPath:'/foo/',
    ...
}

in conclusion

Static resources can be processed in two ways:

• Imported in JavaScript or referenced in template/CSS via relative path. Such references will be processed by webpack.
• Placed in the public directory or referenced by an absolute path. Such resources will be copied directly without being processed by webpack.

principle

Importing from a relative path

When you reference a static resource using a relative path (must start with .) in a JavaScript, CSS or *.vue file, the resource will be included in the webpack dependency graph.

During its compilation process, all resource URLs such as <img src="...">, background: url(...) and CSS @import are resolved as a module dependency.

When using an absolute path, the path reads the resources in the public folder. Any static resources placed in the public folder will be simply copied to the compiled directory without any special processing by webpack.

When your application is deployed at the root path of a domain name, such as http://www.abc.com/, this import method can be displayed normally. However, if your application is not deployed at the root of the domain name, you need to configure the publicPath prefix for your URL. publicPath is the base URL when deploying the application package, which needs to be configured in vue.config.js.

Extensions

About vue file-loader vs url-loader

If we want to introduce pictures into the page (including the src of img and the url of background). When we develop based on webpack, we will encounter some problems when introducing pictures.

One of them is the problem of reference path. Take the background style as an example, we use the URL to introduce the background image. We all know that webpack will eventually package each module into one file, so the URL path in our style is relative to the entry HTML page, not relative to the path where the original CSS file is located. This will cause the image to fail to be imported. This problem is solved by using file-loader, which can parse the URL introduction in the project (not limited to CSS), copy the image to the corresponding path according to our configuration, and then modify the reference path of the packaged file according to our configuration to point to the correct file.

In addition, if there are many pictures, many http requests will be sent, which will reduce page performance. This problem can be solved by url-loader. url-loader will encode the imported image and generate dataURl. It is equivalent to translating the image data into a string of characters. Then pack this string of characters into a file, and finally you only need to import this file to access the image. Of course, if the image is large, encoding will consume performance. Therefore, url-loader provides a limit parameter. Files smaller than the limit bytes will be converted to DataURl, and files larger than the limit will be copied using file-loader.

**What is the relationship between url-loader and file-loader? **In short, url-loader encapsulates file-loader. url-loader does not depend on file-loader, that is, when using url-loader, you only need to install url-loader, and you do not need to install file-loader, because url-loader has built-in file-loader. From the above introduction, we can see that url-loader works in two situations: 1. If the file size is smaller than the limit parameter, url-loader will convert the file to DataURL; 2. If the file size is larger than the limit, url-loader will call file-loader for processing, and the parameters will be passed directly to file-loader. So we just need to install url-loader.

Original link: https://www.cnblogs.com/weizaiyes/p/7461967.html

About background url when introducing pictures

According to the above theory, if I use a relative path to import the image, webpack will require it.

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

And indeed it does, I see the background of the page change to:

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

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

Or use dynamic style:

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

Reference

cli.vuejs.org/en/guide/html

https://www.jb51.net/article/163170.htm

github.com/vuejs/vue-c…

Summarize

This is the end of this article about vue dynamically loading local images. For more relevant vue dynamically loading local images content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!