Shulou(Shulou.com)05/31 Report--

In this article Xiaobian for you to introduce in detail "how to solve vue: src file path error problem", detailed content, clear steps, details handled properly, I hope this "how to solve vue: src file path error problem" article can help you solve doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge bar.

First of all, explain the difference between vue-cli 's assets and static's two files, because it will help you understand the later solution.

Assets: during the compilation of the project, it will be parsed into module dependencies by webpack, and only relative paths are supported, such as

And background:url (. / logo.png), ". / logo.png" is the relative resource path, which resolves webpack to module dependencies

Static: files in this directory will not be processed by webpack, which simply means that the place where third-party files are stored will not be parsed by webpack. It will be copied directly to the final package directory (default is dist/static). These files must be referenced using absolute paths, as determined by the build.assetsPublic and build.assertsSubDirectory links in the config.js file. Any file placed in static/ needs to be referenced as an absolute path: / static [filename]

According to the characteristics of webpack, generally speaking, static will not change, files in the third file, asserts will put files that may change.

Here comes the problem: using js to dynamically load assets or the picture of this file appears the status code of 404.

Code example

/ / js part data () {return {images: [{src:'./1.png'}, {. / 2.png}]}}

Run and find that the picture is not displayed, and the error code is 404.

Reason: the picture will be used as a module in webpack. Because it is dynamically loaded, url-loader will not be able to resolve the image address, and then npm run dev or npm run build will cause the path not to be processed [all paths resolved by webpack will be resolved to / static/img/ [filename] .png, and the full address is localhost:8080/static/img/ [filename] .png]

Solution:

① loads the image as a module, such as images: [{src:require ('. / 1.png')}, {src:require ('. / 2.png')}] so that webpack can parse it.

② puts the image in the static directory, but it must be written as an absolute path such as images: [{src: "/ static/1.png"}, {src: "/ static/2.png"}] so that the picture will also be displayed, of course, you can also shorten the writing length of the path by defining it in webpack.base.config.js.

Of course, you say that when there are too many local pictures, isn't it troublesome to write like this, then we actually simplify the operation in this way.

Step 1: create a new json folder in static

Part II: fill in the json document, as shown in the figure

Part III: introduce json into the vue file of the response and parse the reference

Read here, this "how to solve vue: src file path error" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more about the article, welcome to follow the industry information channel.

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.