Recently, when I was developing a small program using uniapp, I encountered a problem, that is, the pictures could not be displayed normally when traversing the pictures. After some exploration and research, I finally found a solution, and I'm sharing it with you now.
1. Problem description
In the small program I developed, I need to traverse all the pictures in a folder and display them on the page. First, I used uniapp's native componentto display pictures. The specific code is as follows:
This code simply selects from the album by calling theuni.chooseImage()
method Picture, then put the selected picture path into an array, and then display each picture through thev-for
command.
But when I ran the program, no pictures were displayed on the page, so I started a long troubleshooting journey.
2. Troubleshooting
1. Is the image path correct?
First of all, I thought about the problem of the image path. I used the debugging tool of uniapp to check and found that there was no problem with the path, and the image could be displayed normally in the preview area of the debugging tool.
2. Are the images loaded correctly?
The second question is whether the image is loaded correctly. Because I am using a local image, I tried to upload the image to the server and found that the image can be displayed normally on the server, but it still cannot be displayed locally.
3. Does it conflict with other components?
I suspect that it is because I use other components in the page that conflict with thetag, but after I comment out the code of other components, the image still cannot be displayed.
4. Can the picture browsing component provided by uniapp be displayed normally?
Finally I thought of using the image browsing component provided by uniapp
to preview the image, and found that the rendered image could be displayed normally.
Up to this point, I still haven’t found the source of the problem, but I am convinced that it is a problem with thetag.
3. Solution
At this time, I re-read the instructions on using thetag in the official uniapp documentation and discovered the problem:
Through this explanation, I understand that it is because the tag uses the
uni-app
Native componentsimage
are based on # when usingweb
containers (includingH5
,App
) ##HTMLimg
Implemented by component. The
srcattribute of the
imagetag cannot be directly adapted to the local path and requires special processing:
- HBuilderX
When debugging on a real machine, setdevelopment tool page, Set the
Appstartup mode to
Customor
Customized debugging, Function-> Run-> App startup mode-> Custom (debug) ` , then just like the browser, both local paths and network paths can be used.
- app-plus
in
manifest.json->
debug->
webviewis
true. In this way, when debugging on a real machine, you can also directly use the local path to access.
imgcomponent in
HTML, in # Direct use of local paths is not supported in ##uniapp
and requires special processing.So I used the
development tools page to set theApp
startup mode to custom (debug), and now the pictures can be displayed normally.
Finally, after this investigation, I understood the reason why thetag cannot directly use the local path, and got the correct solution. I hope my experience can help students with similar problems. .<template> <view> <image v-for="(item, index) in imageList" :src="'/' + item.path" :key="index"></image> </view> </template> <script> export default { data() { return { imageList: [] // 图片列表 } }, methods: { async getImageList() { const { tempFilePaths } = await uni.chooseImage({ // 从相册中选择图片 count: 9, sizeType: ['original', 'compressed'], sourceType: ['album'], }) for (let i = 0; i < tempFilePaths.length; i++) { this.imageList.push({ path: tempFilePaths[i], }) } } }, mounted() { this.getImageList() } } </script>
The above is the detailed content of How to solve the problem of uniapp traversing pictures but not coming out?. For more information, please follow other related articles on the PHP Chinese website!