前端编程如何在HTML文件中显示图片

Posted 2023-05-03

我本身是后端 现在想往前端发展, 刚入门, 想问一下如何在html文件中显示图片? 比如我这边写好了一个页面, 把它发送到另一个电脑上, 页面的图片无法显示. 问如何让他显示

如果图片地址写为绝对地址，比如：c:xxx/xxx/xx.jpg，如果这种格式你把整个文件夹拷到另一台电脑上，运行是他就会在新的电脑上面找这个地址，如果找不到就无法显示图片。
相对地址,相对地址的图片文字也就是相对于当前文件的路径地址，这样写即使更换了电脑，路径都是不会变的，图片都能正常显示。建议使用相对地址。 参考技术A

写如显示图片的语言就可以了

<title>图片插入html 在线演示 www.divcss5.com</title> 

</head> 

参考技术B 你是不是想在另一台电脑上拿着你页面项目的网址然后访问你电脑上的项目，
还是你想在另一台电脑上运行你的页面项目
如果是第一种，那你需要做个图片文件代理服务器，一般用nginx代理就可以，映射到你的电脑上的图片路径
如果是第二种，你就把图片随着项目一起打包到另一台电脑上，路径也要和你电脑上的图片路径一致，要么就在另一台电脑上改你的图片路径 参考技术C 首先你把本地的HTML页面写好后，把整个文件都要发送到另外一台电脑上，这样整个DOM就文件全部到另一个电脑上去了，另外你还要用你的开发工具修改HTML中，图片文件所在的位置路径。要不然显示差差。 参考技术D 写好了一个html文件，图片都是引用进去的，并不在html文件里，你只把html文件发过去了，图片没发过去在另一台电脑上没有你这张图片怎么可能显示，要么你img标签里引用的图片写上相对路径并把图片一并发过去要么你就本地起一个http服务，src内写上你本地的IP地址+图片路径在同一个局域网内只发html文件同样可以看到

django1.8中如何显示图片

如何在开发django阶段显示图片，使用javascript、css等静态文件

在django中将图片、javascript、css称为静态文件。如何将这些静态文件显示在django中呢？近期做一个项目，一直困扰着我，后来查找各种资源，终于在官方文档中找到。

官方文档链接

在setting.py文件中进行修改

 1INSTALLED_APPS 中要有 django.contrib.staticfiles 

 

2要设置静态文件查找目录

 STATIC_URL = \'/static/\'

或者：

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

3在模版template中,使用静态文件连接时要么硬编码，例如：“/static/img/myexample.jpg”

注意：静态文件需要放在STATICFILES_DIRS声明的文件夹里。比如我的目录结构如下

要么使用static模版标签，例如：

{% load static %}
<img src="{% static "img/myexample.jpg" %}" alt="My image"/>

4存储静态文件在静态文件目录中

要么在每个app目录下，新建一个static文件夹，把静态文件放到其中。例如：在app1包里有static/img/myexample.jpg与之相关的设置就是在setting.py文件中设置

 STATIC_URL = \'/static/\'

要么将所有的静态文件放到一个公共的地方，方便对其管理和共享。例如：在manage.py同级目录下新建一个static文件夹，在这个文件夹下在建一个img文件夹，里面有myexample.jpg文件。在与之相关的设置是

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

django系统会首先在STATICFILES_DIRS中查找所需的静态文件，然后在STATIC_URL中查找，如果有同名的文件，会返回第一个找到的文件。

 

二、我的一个例子：

setting.py文件下

STATIC_URL = \'/static/\'
STATICFILES_DIRS = (
        os.path.join(BASE_DIR,\'static\'),
)

static文件结构如下

在template文件中有如下片段：

{% block content %}
<div>
{% load static %}
<p>
<a href="/app1/index/"><img src="{% static "img/success1.jpg" %}" alt="My image" height="600px" width=auto/></a>
</p>
</div>
{% endblock %}

下面是实验效果