জাভাস্ক্রিপ্ট সেট img src


96

আমি সম্ভবত কিছু সাধারণ অনুপস্থিত রয়েছি তবে আপনি যখন পড়েছেন সব কিছু কাজ করে না তখন এটি বেশ বিরক্তিকর। আমার কাছে এমন চিত্র রয়েছে যা ডায়নামিক্যালি উত্পন্ন পৃষ্ঠার কোর্সে বহুবার নকল করা যায়। সুতরাং সুস্পষ্ট কাজটি হ'ল এটির প্রিলোড করা এবং সেই পরিবর্তনশীলটিকে উত্স হিসাবে সর্বদা ব্যবহার করা।

var searchPic;
function LoadImages() {
    searchPic = new Image(100,100);
    searchPic.src = "XXXX/YYYY/search.png";
    // This is correct and the path is correct
}

তারপরে আমি ইমেজটি ব্যবহার করে সেট করেছি

  document["pic1"].src = searchPic;

বা

  $("#pic1").attr("src", searchPic);

যাইহোক, ইমেজ Firebug সঠিকভাবে সেট করা হয় না যখন আমি ইমেজ অনুসন্ধান আমি পেতে [object HTMLImageElement]হিসাবে srcইমেজ

আই-তে আমি পেয়েছি:

http://localhost:8080/work/Sandbox/jpmetrix/[object]

উত্তর:


97

এটি ব্যবহার করে আপনার এসআরসি নির্ধারণ করা উচিত:

document["pic1"].src = searchPic.src;

বা

$("#pic1").attr("src", searchPic.src);

58

খালি জাভাস্ক্রিপ্ট imgট্যাগ তৈরি করতে এবং add attributesম্যানুয়ালি,

var image = document.createElement("img");
var imageParent = document.getElementById("body");
image.id = "id";
image.className = "class";
image.src = searchPic.src;            // image.src = "IMAGE URL/PATH"
imageParent.appendChild(image);

এসসিআর সেট করুন pic1

document["#pic1"].src = searchPic.src;

বা getElementById সহ

document.getElementById("pic1").src= searchPic.src;

এটি সংরক্ষণাগারভুক্ত করার জন্য জে-কোয়েরি,

$("#pic1").attr("src", searchPic.src);

6
ডকুমেন্ট.জেটলেমেন্টবিআইআইডি ("
পিক

6

চিত্র নির্মাণকারীর উদাহরণগুলি কোথাও ব্যবহার করার উদ্দেশ্যে নয়। আপনি কেবলমাত্র srcএবং চিত্রটির প্রিলোডগুলি সেট করেছেন ... এবং এটিই শেষ, শো শেষ show আপনি অবজেক্টটি ফেলে দিয়ে এগিয়ে যেতে পারেন।

document["pic1"].src = "XXXX/YYYY/search.png"; 

আপনার যা করা উচিত তা হচ্ছে। আপনি এখনও চিত্র নির্মাণকারী ব্যবহার করতে পারেন, এবং onloadআপনার হ্যান্ডলারে দ্বিতীয় ক্রিয়াটি সম্পাদন করতে পারেন searchPic। এটি srcআসল imgবস্তুটিতে সেট করার আগে চিত্রটি লোড হওয়ার বিষয়টি নিশ্চিত করে ।

তাই ভালো:

function LoadImages() {
    searchPic = new Image();
    searchPic.onload=function () {
        document["pic1"].src = "XXXX/YYYY/search.png";
    }
    searchPic.src = "XXXX/YYYY/search.png"; // This is correct and the path is correct
}

যদি আপনি ওনারলোড () এ সিসিআর সেট করেন তবে আপনি একটি অসীম লুপ পাবেন যা সার্ভারকে হাতুড়ি দেয় অর্থাৎ এসসিআর লোড হওয়ার পরে এটি লোডকে কল করে।
ডেভিড নিউকম্ব

লোড ইভেন্টে একবারে গুলি চালানো যেতে পারে সেহেতু অন্য কিছু ভুল হচ্ছে। একই চিত্রটিতে উত্স সেট করে আপনি এটি আর জ্বালাতে পারবেন না।
ব্রেটন

4
আপনি ঠিক বলেছেন, এমন অন্যান্য এসও নিবন্ধ রয়েছে যা "XXXX / YYYY / search.png" ওয়েবক্যামের ছবি বা সার্ভারের দিকের পরিবর্তিত কোনও বিষয় হলে অদ্ভুত ক্যাশে সমস্যা সম্পর্কিত কথা বলে। তারা প্রস্তাব দিয়েছিল যে আমরা লিঙ্কটি "XXXX / YYYY / search.png? T = <থ্যাডেট>" এ পরিবর্তন করব। আপনার সমাধানটি সর্বোত্তম এবং পরিষ্কার ছিল তাই আমি দুজনকে একত্রিত করেছিলাম এবং এটি সার্ভারকে আঘাত করেছে।
ডেভিড নিউকম্ব

নিবন্ধন করুন এটা একটা মুশকিল। সেক্ষেত্রে, আমি মনে করি আমি নতুন চিত্র () অংশটি খাঁজ করব এবং এর পরিবর্তে দুটি প্রকৃত ডোম চিত্র থাকবে-যেমন একটি ডাবল বাফার। ইমেজ 1 লুকান, ইমেজ 2 লুকান। একটি বিরতি টাইমার মধ্যে: চিত্র 1 এ src সেট করুন, এবং image1.onload এ, 1 দেখান, 2 লুকান 2 অন্তর্বর্তী আগুন: চিত্র 2 এ src সেট করুন। ইমেজ 2.অনলোডে, 2 দেখান, লুকান 1। অপেক্ষা করুন, বিরতি আগুন: চিত্র 1 এ এসসিআর সেট করুন। ইমেজ 1.অনলোডে, 1 দেখান, 2 টি লুকান
ব্রেটন

5

এছাড়াও, এটির সমাধানের একটি উপায় হ'ল document.createElementআপনার এইচটিএমএল আইএমজি ব্যবহার এবং তৈরি করা এবং এর বৈশিষ্ট্যগুলি এর মতো সেট করা।

var image = document.createElement("img");
var imageParent = document.getElementById("Id of HTML element to append the img");
image.id = "Id";
image.className = "class";
image.src = searchPic.src;
imageParent.appendChild(image);

REMARK এক পয়েন্ট যে জাভাস্ক্রিপ্ট সম্প্রদায় ডান এখন যেমন হিসাবে ব্যবহারের ডকুমেন্ট নির্বাচকরা ডেভেলপারদের উৎসাহিত হয় querySelector, getElementByIdএবং getElementsByClassNameবরং ডকুমেন্ট চেয়ে [ "pic1"]।



1

আপনার পুরো একটি নতুন চিত্র তৈরি করার দরকার নেই ... src অ্যাট্রিবিউটটি কেবল একটি স্ট্রিংয়ের মান নেয় :-)


4
পৃষ্ঠাটি জাভাস্ক্রিপ্ট ব্যবহার করে যদি গতিশীলভাবে উত্পন্ন হয়, পৃষ্ঠাটি লোড হওয়ার সাথে সাথে আপনি চিত্রটি ডাউনলোড করতে চাইবেন যাতে আপনি প্রয়োজনীয় উপাদান তৈরি করার সময় প্রথম কোনও বিরক্তিকর বিলম্ব না পান। ইমেজ অবজেক্ট তৈরির কারণ এটি।
tvanfosson

আপনি ঠিক বলেছেন, আমি আমার উত্তর খুব সুনির্দিষ্ট ছিল না। আমি কেবল বলতে চাইছিলাম যে এসসিআর অ্যাট্রিবিউট একটি স্ট্রিং নেয় এবং সম্পূর্ণরূপে অনটি তৈরি করার সুবিধাটি সম্পর্কে ভুলে গিয়েছিল Image। ধন্যবাদ!
জোড়েনবি

0

আপনার সেট করা দরকার

document["pic1"].src = searchPic.src;

সার্চপিকটি নিজেই আপনার চিত্র (), আপনার নির্ধারিত src টি পড়তে হবে।


0

আপনার এসআরসি সম্পত্তি হ'ল একটি অবজেক্ট কারণ আপনি জাভাস্ক্রিপ্টে তৈরি করা পুরো চিত্র হিসাবে এসসিআর উপাদানটি সেট করছেন।

চেষ্টা করুন

document["pic1"].src = searchPic.src;

0

কি দারুন! যখন আপনি ব্যবহার srcতারপর srcএর searchPicব্যবহার করা উচিত নয়।

document["pic1"].src = searchPic.src

ভালো দেখায়


0

আপনি ব্যবহার করেন, তাহলে WinJS আপনি পরিবর্তন করতে পারেন srcমাধ্যমে Utilitiesফাংশন।

WinJS.Utilities.id("pic1").setAttribute("src", searchPic.src);
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.