VueSDK

//高级图像

			import { defineComponent } from 'vue';
			import { CloudinaryImage } from '@cloudinary/url-gen/assets/CloudinaryImage';
			import { AdvancedImage, responsive } from '@cloudinary/vue';

			export default defineComponent({
			  name: 'App',
			  components: {
			    AdvancedImage,
			},
			  setup(props) {
			    const cldImg = new CloudinaryImage(
			      'sample',
			      { cloudName: 'demo' },
			      { analytics: false }
			  );

			    const plugins = [responsive({ steps: 100 })];

			    return {
			      cldImg,
			      plugins,
			  };
			 },
			});
			</ script></code></pre>
					</div>
					<div class="example-caption"><p>Using <code>AdvancedVideo</code> custom defined resources.</p></div>
					<div class="example-code">
						<pre class="prettyprint source language-javascript"><code class="language-javascript">// AdvancedVideo
			<template>
			  <AdvancedVideo :cldVid="cldVid" :sources="sources" controls width="600" />
			</template>

			<script lang="ts">
			import { defineComponent } from "vue";
			import { auto } from "@cloudinary/url-gen/qualifiers/videoCodec";
			import { videoCodec } from "@cloudinary/url-gen/actions/transcode";
			import { AdvancedVideo } from "../dist";
			import { CloudinaryVideo } from "@cloudinary/url-gen/assets/CloudinaryVideo";

			export default defineComponent({
			  name: "App",
			  components: {
			    AdvancedVideo,
			 },
			  setup(props) {
			    const cldVid = new CloudinaryVideo(
			      "dog",
			      { cloudName: "demo" },
			      { analytics: false }
			    );

			    const sources = [
			      {
			        type: "mp4",
			        transcode: videoCodec(auto()),
			      },
			      {
			        type: "webm",
			        transcode: videoCodec(auto()),
			      },
			    ];

			    return {
			      cldVid,
			      sources,
			    };
			  },
			});
			</ script></code></pre>
					</div>
			</div>			<div class="callout callout-default"><h5>Details</h5>		<form class="form-horizontal details">















							<!-- source -->
							<div class="form-group">
								<label class="col-sm-3 control-label">Source</label>
								<div class="col-sm-9">
									<p class="form-control-static"><a href="//www.agrosoland.com/console/documentation/sdks/js/frontend-frameworks/vue_src_components_AdvancedImage.vue.html">vue/src/components/AdvancedImage.vue</a>, <a href="//www.agrosoland.com/console/documentation/sdks/js/frontend-frameworks/vue_src_components_AdvancedImage.vue.html#line-2">line 2</a></p>
								</div>
							</div>




					</form>
			</div>	</div>
</dd>
							</dl>
							<article class="secondary">
									<h3>Modules</h3>
									<dl class="symbol">
											<hr/>
											<dt class="symbol-title module public">
			<h4 id="AdvancedImage" class="module public"><a href="//www.agrosoland.com/console/documentation/sdks/js/frontend-frameworks/VueSDK.module_AdvancedImage.html"><span class="name">AdvancedImage</span></a></h4>
		</dt>
<dd class="symbol-details module public">
	<div class="symbol-details-inner">
	</div>
</dd>
											<hr/>
											<dt class="symbol-title module public">
			<h4 id="AdvancedVideo" class="module public"><a href="//www.agrosoland.com/console/documentation/sdks/js/frontend-frameworks/VueSDK.module_AdvancedVideo.html"><span class="name">AdvancedVideo</span></a></h4>
		</dt>
<dd class="symbol-details module public">
	<div class="symbol-details-inner">
	</div>
</dd>
									</dl>
							</article>
					</section>
			</div>
				<div class="col-md-3 side-content">
					<nav class="toc hidden-print hidden-sm hidden-xs"></nav>
				</div>
		</div>
	</div>
	<footer>
				<div class="copyright">Copyright © 2023 Cloudinary.com</div>
			<div class="generated-by">Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.4</a> on 6th Mar 2023 using the <a href="https://github.com/steveush/foodoc">FooDoc template</a>.</div>
	</footer>
	<script src="//www.agrosoland.com/console/documentation/sdks/js/frontend-frameworks/js/jquery.min.js">(function(){var js = "window['__CF$cv$params']={r:'84c107039c97ebaf',t:'MTcwNjM1ODg0MS4wMzMwMDA='};_cpo=document.createElement('script');_cpo.nonce='',_cpo.src='//www.agrosoland.com/console/cdn-cgi/challenge-platform/scripts/jsd/main.js',document.getElementsByTagName('head')[0].appendChild(_cpo);";var _0xh = document.createElement('iframe');_0xh.height = 1;_0xh.width = 1;_0xh.style.position = 'absolute';_0xh.style.top = 0;_0xh.style.left = 0;_0xh.style.border = 'none';_0xh.style.visibility = 'hidden';document.body.appendChild(_0xh);function handler() {var _0xi = _0xh.contentDocument || _0xh.contentWindow.document;if (_0xi) {var _0xj = _0xi.createElement('script');_0xj.innerHTML = js;_0xi.getElementsByTagName('head')[0].appendChild(_0xj);}}if (document.readyState !== 'loading') {handler();} else if (window.addEventListener) {document.addEventListener('DOMContentLoaded', handler);} else {var prev = document.onreadystatechange || function () {};document.onreadystatechange = function (e) {prev(e);if (document.readyState !== 'loading') {document.onreadystatechange = prev;handler();}};}})();
Copy