☰

如何在html中显示图片？

tag-icon • tag-icon html
如何在html中显示图片？

我是 Ubuntu 新手，想在上面写一个网站。我习惯使用 Windows XP，习惯按如下方式编写显示图像代码：

img src="C:\Users\Username\My Pictures\Test.jpg" alt="Picture"

在 Ubuntu 中它们没有驱动器号，我该怎么办？我的图片位于名为的单独分区中Documents，在文件属性下，它显示目录为：

/media/Documents/Files/Micah/Homepage Website/Picture.jpg

但是当我将其写入 html 时，它只会以普通文本显示图片！有什么帮助吗？

答案1

权限可能会阻碍你。图像的整个路径必须可被 Web 服务器读取。如果你使用 Apache 以 www-data 用户身份运行，则你的目录可能应设置为 0755 (drwxr-xr-x)，文件应设置为 0644 (-rw-r--r--)。你可以在控制台/shell 中看到权限，如下所示：

cd /media
ls -l

您可以使用如下方式更改权限：

sudo chmod 0755 directory_name
sudo chmod 0644 file_name

对每个目录和所有要访问的文件执行此操作。或者，只需滑动两次，一次用于目录，一次用于文件，即可获得所有文件，而无需逐个选择目录/文件：

sudo find /media -type d -exec chmod 0755 {} \;
sudo find /media -type f -exec chmod 0644 {} \;

当您知道权限正确时，创建指向目录的符号链接会对您大有裨益，而不必尝试通过绝对文件系统路径引用所有目录。将目录更改为网站文档根目录。假设这是 /home/micah/public_html/。

cd /home/micah/public_html/
ln -s /media/Documents/Files/Micah/Homepage\ Website/ images

现在，您有一个指向图像位置的符号链接（如虚拟目录）。为了使其正常工作，Apache 需要知道它被允许遵循符号链接。因此，在您定义网站的 Apache 配置文件中，查看“Directory”指令以确保您已指定“FollowSymLinks”选项。

<Directory />
    Options FollowSymLinks
</Directory>

此后重新启动 Web 服务器。

sudo service apache2 restart

那么，XHTML 是这样的：

<img src="/images/Picture.jpg" width="" height="" alt="" title="" />

顺便说一下，当 URI 中有空格时，每个空格都替换为 HTML 字符实体，%20。

如果您只是创建 HTML 文件，请忽略 Apache 部分。

答案2

正如我在您的代码中看到的，您的图片在其中一个文件夹中有一个空格：/Homepage Website/Picture.jpg

通常，这不是一个好主意。尝试添加下划线：

/Homepage_Website/图片

将文件名用小写字母表示也是一种很好的做法：“picture”而不是“Picture”。

这有时可能会引发问题。

答案3

那么你尝试过吗<img src="/media/Documents/Files/Micah/Homepage Website/Picture.jpg">？

答案4

尽管您使用的是 Ubuntu，但这更确切地说是一个 HTML 问题。请记住，Web 浏览器将首先查看正在打开的文件所在的文件夹。因此，如果您打开的页面是 index.html（Web 浏览器会按标准查找该名称）并且图像位于同一文件夹中，则浏览器将加载 Picture.jpg，并为其设置宽度和高度。

这样的

<img src="Picture.jpg" width="1000px" height="200px">

我使用此方法将背景图像设置为供个人使用的一种电子书，我使用网络浏览器访问文档。

您可以使用“../filename”来获取上一个文件夹中的文件。我使用它返回上一页并引用正在使用的 CSS 样式表。每个文档都需要该引用。

<link rel="stylesheet" type="text/css" href="../stylesheetname.css" />

如果样式表位于后一个文件夹。

我正在尝试从我的工作中找到一个引用另一个文件夹中的文件的示例，以便您可以将所有图像放在 Images 文件夹中。但我已经有一段时间没有在这个项目上做任何工作了。我现在就给你这个。

编辑：看来你只需这样做：

<img src="/images/Picture.jpg" width="1000px" height="200px">

或这个：

<img src="/images/moreimages/Picture.jpg" width="1000px" height="200px">

你可能会发现W3Schools 的 HTML 教程有用

问候。

相关内容