uniApp, develop App, after quoting pictures, real device test preview error

uniapp is a domestic front-end cross-platform framework based on Vue. It can achieve a set of codes that can be shared by multiple platforms. But there are indeed some problems with the image component.

In the official document , he describes it like this

When tested on a real machine, this problem manifests itself as a pop-up window preview error --- URL is not definde

But we can't really use the absolute path to import images. This is a very troublesome thing during maintenance. So I started to think:

Since you may not be able to find it when you follow the path, I won't give you the path. I'll give you base64 encoding so you won't lose it. It just so happens that the src attribute of the image component supports base64.

So, come on, first convert the images to base64 , and then store them in a json file. (I am just giving a general idea here. This base64 is not complete. There are too many complete ones, hahahaha).

{
    "logo1":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAAXNSR0IArs4c6QAAIABJRErkJggg=="
}

Then, just let our page get the corresponding json when loading. I use require here to make it simpler, but if your Json file is relatively large, it is best to get it through axios.

<image :logoImg="logo1" style="width: 50px;height: 50px;display: inline-flex;"/>

var logoImg=require('你的json文件地址，包括文件后缀啊').logo1

Finally, after the power-on test, the real machine ran perfectly without bugs, and the preview error message finally disappeared.

An alternative solution, hahahaha, I hope it will be helpful to you.