VS Code programında ön izleme resim ekleyince hata veriyor

u_mehmet

Femtopat
Katılım
14 Şubat 2024
Mesajlar
6
Daha fazla  
Cinsiyet
Erkek
Merhaba.
VS Code editöründe web sitesi tasarlamaya çalışıyorum. Uzun süredir bir sıkıntı ile karşılaşmadım. Fakat bugün VS Code Preview'inde şöyle bir hata ile karşılaştım:
Sayfaya resim eklemeye çalışıyorum. Chrome ya da MS Edge tarayıcılarında sorunsuz görüntülenen resimler, VS Code'un önizlemesinde gözükmüyor. Bunun yerine bir hata varmış gibi küçük bir hata ikonu veriyor.
ChatGPT ile 1 saatten uzunca bir süre bu konu hakkında tartıştık. Verdiği çözümleri uyguladım. Ancak işe yaramadı. Daha önce bu sorunu yaşayıp da çözebilen varsa yardımcı olsa çok sevinirim.
Basit bir HTML kodunu da ekte gönderiyorum.

HTML:
[CODE=html]<!DOCTYPE html>

<html>

 <head>

 </head>

 <body>

 <h1> Filistin Bayrağı</h1>

 <img src="resimler/bayrak.jpg" alt="Filistin Bayrağı">

 <h1> Başka bir Filistin Bayrağı</h1>

 <img src="resimler/harita1.jpg" alt="Filistin Bayrağı">

 <h1> Filistin Haritası</h1>

 <img src="resimler/harita.jpg" alt="Filistin Haritası">

 </body>

</html>

[/CODE]
 
Son düzenleyen: Moderatör:
Merhaba.
VS Code editöründe web sitesi tasarlamaya çalışıyorum. Uzun süredir bir sıkıntı ile karşılaşmadım. Fakat bugün VS Code Preview'inde şöyle bir hata ile karşılaştım:
Sayfaya resim eklemeye çalışıyorum. Chrome ya da MS Edge tarayıcılarında sorunsuz görüntülenen resimler, VS Code'un önizlemesinde gözükmüyor. Bunun yerine bir hata varmış gibi küçük bir hata ikonu veriyor.
ChatGPT ile 1 saatten uzunca bir süre bu konu hakkında tartıştık. Verdiği çözümleri uyguladım. Ancak işe yaramadı. Daha önce bu sorunu yaşayıp da çözebilen varsa yardımcı olsa çok sevinirim.
Basit bir HTML kodunu da ekte gönderiyorum.

HTML:
[CODE=html]<!DOCTYPE html>

<html>

 <head>

 </head>

 <body>

 <h1> Filistin Bayrağı</h1>

 <img src="resimler/bayrak.jpg" alt="Filistin Bayrağı">

 <h1> Başka bir Filistin Bayrağı</h1>

 <img src="resimler/harita1.jpg" alt="Filistin Bayrağı">

 <h1> Filistin Haritası</h1>

 <img src="resimler/harita.jpg" alt="Filistin Haritası">

 </body>

</html>

[/CODE]
Dosyaları preview etmeye çalışırken belki permission denied durumu oluyor olabilir. Projeyi geliştirdiğiniz dizinde mi fotoğraflar? O bahsettiğiniz ikon dosya bulunamadığında ortaya çıkar.
 
Şu eklentiyi kullandığınızı tahmin ediyorum çünkü VS Code içinde ön izleme sekmesi açan bir bunu gördüm:


Ben denediğimde herhangi bir sorunla karşılaşmadım. Resimlerin konumunu yanlış yazmış olabilirsiniz diyeceğim de tarayıcılarda düzgün çalıştığını belirtiyorsunuz.

Daha iyi bir alternatif önerebilirim:

 
Dosyaları Preview etmeye çalışırken belki permission denied durumu oluyor olabilir. Projeyi geliştirdiğiniz dizinde mi fotoğraflar? O bahsettiğiniz ikon dosya bulunamadığında ortaya çıkar.

Evet. Fotoğraflar projeyi geliştirdiğim dizinde. Şöyle bir hata alıyorum.
"Some content has been disabled in this document"
Preview'de hata veriyor. (ekran fotosu ekte) ama "open with live server" yaptığımda hata vermiyor. (ekran fotosu ekte)

Şu eklentiyi kullandığınızı tahmin ediyorum çünkü VS Code içinde ön izleme sekmesi açan bir bunu gördüm:


Ben denediğimde herhangi bir sorunla karşılaşmadım. Resimlerin konumunu yanlış yazmış olabilirsiniz diyeceğim de tarayıcılarda düzgün çalıştığını belirtiyorsunuz.

Daha iyi bir alternatif önerebilirim:

Evet doğrudur. Bahsettiğin eklentiyi kullanıyorum. Ne var ki preview çalışmadığında direkt önerdiğiniz eklentiyi kullanmaya başladım zaten. Öneri için teşekkürler. Ama bence preview çok daha hızlı oluyor.
 

Dosya Ekleri

  • 1.png
    1.png
    131,6 KB · Görüntüleme: 7
  • 2.png
    2.png
    98,8 KB · Görüntüleme: 9
Evet, doğrudur. Bahsettiğin eklentiyi kullanıyorum. Ne var ki preview çalışmadığında direkt önerdiğiniz eklentiyi kullanmaya başladım zaten. Öneri için teşekkürler ama bence preview çok daha hızlı oluyor.

Rica ederim. Anlayabiliyorum. Live Server'ı kullanırken ekranın sol tarafına VS Code'u ve sağ tarafına tarayıcıyı koyabilirsiniz -veya tam tersi-, benzer bir görüntü oluşacaktır.

İlginçtir ki ben yaşadığınız sorunu üretemedim. Üç noktalı menüden "Change Preview Security Settings"e basıp ardından kendinize uygun seçeneği seçebilir misiniz?

1714000363568.png
1714000440532.png

Tahminimce "Strict"in hemen altındaki seçenek yeterli olacaktır.
 
Edge devtools yükle. Oda HTML prewiew ile ayni. Ama güzel yanı, JS'e geçtiğinde Console'da sahip ve geliştirici ayarları var.
 
Rica ederim. Anlayabiliyorum. Live Server'ı kullanırken ekranın sol tarafına VS Code'u ve sağ tarafına tarayıcıyı koyabilirsiniz -veya tam tersi-, benzer bir görüntü oluşacaktır.

İlginçtir ki ben yaşadığınız sorunu üretemedim. Üç noktalı menüden "Change Preview Security Settings"e basıp ardından kendinize uygun seçeneği seçebilir misiniz?


Tahminimce "Strict"in hemen altındaki seçenek yeterli olacaktır.
'Strict'in hemen altındaki, hatta onun altındakini, onun da altındaki tüm seçenekleri seçip VS Code'u yeniden başlattım. Maalesef değişen bir şey olmadı. :)

Edge devtools yükle. Oda HTML prewiew ile ayni. Ama güzel yanı, JS'e geçtiğinde Console'da sahip ve geliştirici ayarları var.

Yükledim. Gayet hoş oldu. Ara sıra bunu da kullanırım. Öneri için teşekkürler.
 
Son düzenleme:

Geri
Yukarı