如何在小程序中添加图片和视频

雷霆半月斩掉你的板砖2024-05-02 21:34

在微信小程序中添加图片和视频可以通过特定的组件和属性来实现。

对于添加图片，你可以使用<image>组件。

javascript 复制代码

<view>  
  <image src="图片链接" style="width: 375rpx; height: 375rpx;"></image>  
</view>

这里，"src"属性是图片的URL链接，它可以是网络上图片的链接，也可以是已经上传到小程序项目的图片资源链接。style属性用于设置图片的宽度和高度。

也可以在WXSS文件中定义图片的样式。例如：

javascript 复制代码

.my-image {  
  width: 100%;  
  height: auto;  
}

然后在WXML文件中这样引用：

javascript 复制代码

<view>  
  <image src="图片链接" class="my-image"></image>  
</view>

对于添加视频，使用<video>组件。首先，在WXML文件中：

javascript 复制代码

<view class='video'>  
  <video src="视频链接"></video>  
</view>

这里，"src"属性是视频的URL链接。

如果想要添加的是腾讯视频，需要开启腾讯视频插件，并复制腾讯视频的链接地址。在WXML文件中，可以使用<txv-video>组件来播放腾讯视频，例如：

javascript 复制代码

<view class='video'>  
  <txv-video vid="视频ID" playerid='自定义播放器ID'></txv-video>  
</view>