Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to solve the problem that vue pictures need to be introduced in the way of require, which has a certain reference value, and interested friends can refer to it. I hope you can learn a lot after reading this article.

The picture is introduced in require mode.

In vue, we sometimes load pictures dynamically, and we need to introduce pictures in the way of require.

Html

/ / Picture background picture

Js

Picture image

Export default {data () {return () {rightIcon: require (". / image/membercenter.png"); tabSrc: {backgroundImage: "url (" + require (".. / static/yes.png") + ")"}} what is the difference between the pictures introduced by require and those introduced directly?

Require is a method in node that is used to "import modules, JSON, or local files." That is, if we use require to bring in an image file, then require returns the image used for the introduction (the compilation path of the image after the npm runs). If a string is used, it is a fixed string path of type string.

We know that the picture introduced in src should be the path of the picture itself (relative path or absolute path), and after the vue project runs through webpack's devServer, under the default vue-cli configuration, the picture will be packaged into name.hash 's picture name, in this case, if we use a fixed string path, we will not be able to find the picture, so we need to use the require method to return the picture's compilation path.

To put it simply, after using the require definition, you can use it dynamically, and you can only write dead without require. If not,: src= "'… / img/image.jpg'" will be parsed to a string

Thank you for reading this article carefully. I hope the article "how to solve the problem of introducing vue pictures by require" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.