Javascript/jQuery prepend images

Javascript/jQuery prepend images

本文关键字：images prepend jQuery Javascript      更新时间：2023-09-26

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

我有不同的"Facebook"帖子。 每篇文章都是一篇文章，整个文章都在标题为"新闻源"的部分中，文章具有以下语法：

  • <H1>，全名，给一个类的缩写名称。
  • <p>，以及他们的"状态更新"。 在此之后，我附加了一个带有JavaScript的<ul>，其中包含<li>喜欢，评论和分享。

然后我添加了一些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 + '">')
};

当我运行它时，它会显示图像的替代文本，指示它无法打开图像。我的问题由两部分组成：

  1. 我三重检查了路径，所以基本上唯一可能出错的是我没有去正确的父目录。我是否开始从 JS 文件或它所在的目录中计算位置？

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

要在任何<h1>上添加不同的图片，您必须循环访问它们。并且您的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+"'");
    });
};
相关文章：