微信小程序显示图片代码

以下是微信小程序显示图片的代码示例：

<image src="{{imageUrl}}" mode="aspectFill"></image>

其中，`imageUrl` 是图片的链接地址，可以通过数据绑定的方式动态设置。

`mode` 属性是可选的，用于指定图片的缩放方式，可取值为：

- `aspectFit`：缩放图片使其宽度和高度都不超过边界。
- `aspectFill`：缩放图片使其宽度和高度都填满边界，可能会裁剪图片。
- `widthFix`：宽度不变，高度自动变化，使图片的宽度等于设置的宽度。

你可以根据具体的需求来选择合适的缩放方式。

相关问题

Java将微信上传的图片MultipartFile存为URL，将URL返回给微信小程序，并显示到微信小程序的<image>中渲染，给出Java和微信小程序的详细代码

Java代码

@RestController
public class ImageUploadController {
 
    private static final String UPLOAD_DIR = "/uploads/";
 
    @Autowired
    private ServletContext servletContext;
 
    @PostMapping("/upload")
    public String uploadImage(@RequestParam("file") MultipartFile file) throws IOException {
 
        String filename = StringUtils.cleanPath(file.getOriginalFilename());
        String ext = filename.substring(filename.lastIndexOf('.') + 1);
        String storedFilename = UUID.randomUUID().toString() + "." + ext;
        String storedDir = servletContext.getRealPath(UPLOAD_DIR);
        Path storedPath = Paths.get(storedDir + storedFilename);
        Files.copy(file.getInputStream(), storedPath, StandardCopyOption.REPLACE_EXISTING);
 
        String url = "/uploads/" + storedFilename;
 
        return url;
    }
}

微信小程序代码

<view class="container">
  <form>
    <button type="button" bindtap="chooseImage">选择图片</button>
    <button type="button" bindtap="uploadImage">上传图片</button>
  </form>
  <image src="{{imageUrl}}" mode="aspectFit" />
</view>

Page({
  data: {
    imageUrl: '',
    file: null
  },
  chooseImage: function () {
    var that = this;
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        that.setData({
          imageUrl: res.tempFilePaths[0],
          file: res.tempFiles[0]
        })
      }
    })
  },
  uploadImage: function () {
    var that = this;
    wx.uploadFile({
      url: 'http://localhost:8080/upload',
      filePath: that.data.imageUrl,
      name: 'file',
      success: function (res) {
        that.setData({
          imageUrl: 'http://localhost:8080' + res.data
        })
      }
    })
  }
})

Java将微信上传的图片MultipartFile存为URL，将URL返回给微信，并显示到微信，给出Java和微信小程序的详细代码

Java代码：

首先，需要引入spring-boot-starter-web 和 spring-boot-starter-websocket 依赖包。

在后端代码中，我们需要使用 MultipartFile 对象来接收微信上传的图片，然后将图片保存到服务器上，并返回图片的 URL 给前端。

@PostMapping("/upload")
public String upload(@RequestParam("file") MultipartFile file) {
    // 获取文件名
    String fileName = file.getOriginalFilename();
    // 获取文件的后缀名
    String suffixName = fileName.substring(fileName.lastIndexOf("."));
    // 生成文件名
    String newFileName = UUID.randomUUID().toString() + suffixName;
    // 文件存储路径
    String filePath = "/upload/";
    // 创建目录
    File dest = new File(filePath + newFileName);
    if (!dest.getParentFile().exists()) {
        dest.getParentFile().mkdirs();
    }
    try {
        // 保存文件
        file.transferTo(dest);
    } catch (IOException e) {
        e.printStackTrace();
    }
    // 返回图片的 URL
    return "http://localhost:8080" + filePath + newFileName;
}

微信小程序代码：

在前端代码中，我们需要使用微信提供的 wx.chooseImage 接口来选择图片，并且使用 wx.uploadFile 接口将图片上传到服务器上。

// 选择图片并上传
wx.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success: function (res) {
        // 上传图片
        wx.uploadFile({
            url: 'http://localhost:8080/upload',
            filePath: res.tempFilePaths[0],
            name: 'file',
            success: function(res){
                console.log(res)
                // 显示图片
                that.setData({
                    imageUrl: res.data
                })
            }
        })
    }
})

在微信小程序中，我们需要使用 setData 方法将图片 URL 显示到前端页面上。