Javascript/jQuery前置图像

我是一名学生，不熟悉JS和jQuery。我正在尝试做一个类似facebook的小项目，因为我可以在里面放很多不同的东西。现在HTML只是静态的，但一旦我有了更多的知识，我计划让它由用户生成

我有不同的“Facebook”帖子。每篇文章都是一篇文章，整个文章都在一个标题为“newsfeed”的部分中，文章的语法如下：

• ，具有全名，给定一个具有缩写名的类

• ，及其“状态更新”。在这之后，我附加了一个带有javascript的
  ，其中包含
  和like、comment和share

然后我添加了一些jQuery/JS代码来添加一个概要图片

profilePics = function () {
    var name = $('article h1').attr('class');
    name = capitalizeFirstLetter(name);
    console.log(name);
    var path = '../media/profile/' + name + '_Square_0.png';
    console.log(path);
    $('article h1').prepend('<img src="' + path + '" alt="image of ' + name + '">')
};

profilePics=函数（）{
var name=$（'article h1'）.attr（'class'）；
姓名=首字母大写（姓名）；
console.log（名称）；
var path='../media/profile/'+name+'\u Square\u 0.png'；
console.log（路径）；
$（'article h1'）。前缀（“”）
};

当我运行这个程序时，它会显示图像的alt文本，表明它无法打开图像。我的问题分为两部分：

我对路径进行了三次检查，所以基本上唯一可能出错的是我没有找到正确的父目录。我是从JS文件还是它所在的目录开始计算位置的

我想为每个帖子添加不同的图片（不确定有多少）。现在它查看类的第一篇文章，然后将其添加到所有文章中

---

要在任何

上添加不同的图片，您必须在其上循环。您的http映像路径必须是绝对路径，而不是相对路径

profilePics = function () {

    var imgPath = '/http-img-path/from/web-root/';

    $('article h1').each(function() {
        var name = $(this).attr('class');
        $(this).prepend("<img src='"+imgPath + name + "_Square_0.png' alt='image of "+name+"'");

    });

};

profilePics=函数（）{
var imgPath='/http img path/from/web root/'；
$（'article h1'）。每个（函数（）{
var name=$（this.attr（'class'）；
$（this）.prepend（“在处理web开发时，控制台（
f12
）（我更喜欢chrome）是您的go-to工具。它将有调试信息和错误输出供您消化！缺少的图像将抛出一个
404
错误，并告诉您它试图查找图像的位置。1.尝试使用图像文件的完整路径；2.要选择第一个
文章
元素，请尝试使用
：eq（）
，例如；
文章：eq（0）
您的路径应与您试图在web浏览器中显示该图像的路径相同。例如，如果您可以在查看图像，则路径变量应为
“/media/profile/foo\u Square\u 0.png”