About the reasons and solutions for the HTML page unable to connect to the static image resource

Cause : Someone wanted to integrate the functions implemented by the virtual try-on algorithm into a web version, back-end service + front-end display. After the service is written, the static image displayed on the web interface always reports an error: Not found, the display is as follows:
Insert picture description here
The display below is normal because the src=network resource of the img tag is normal.
The above two shows that the resource cannot be found, it is src=local static resource, and the slogan is displayed, but the picture is not found.
Check, the network acquisition resource displays 404.
Insert picture description here
Further find the reason:
Insert picture description here
Reason analysis : A local picture is displayed on the page. The seemingly simple needs are not simple.
When someone remembers learning html, why did it show success?
When I was learning, I didn't pay attention to writing static pages. I wrote a static HTML file directly on the local machine. If the src of the img tag points to the local, it will succeed.
However, if you, like me, go through the back-end request and use the template engine, the writing will not succeed. (The request will become http://127.0.0.1:8000/thy.jpg, this kind of request is obviously inaccessible) It is not to find in the current folder, but to find it under a website.

Solution 1-Java Edition :
Turn local resources into accessible resources:
1. For example: the method mentioned by the author of _New_ . He is the Java deployment network backend.

Solution 2-python version , Django background framework
2. I use python to write the background service, and use the background service arranged by the Django framework.

  1. Need to configure the setting.py file. Find files and configure static resources. Configure the following code in the setting.py file:
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = (
    ('css', os.path.join(STATIC_ROOT, 'css').replace('\\', '/')),
    ('js', os.path.join(STATIC_ROOT, 'js').replace('\\', '/')),
    ('images', os.path.join(STATIC_ROOT, 'images').replace('\\', '/')),
    ('upload', os.path.join(STATIC_ROOT, 'upload').replace('\\', '/')),
)
  1. In the url.py file, import: from django.contrib.staticfiles.urls import staticfiles_urlpatterns
    add a line at the end: urlpatterns += staticfiles_urlpatterns()
    make the previous configuration effective.
  2. Then the rest is the same as a normal static page. It should be noted that the introduction of the picture in the html file needs to be written as follows:, <img src="/static/images/map.jpg" >because it is during configuration '/static/'.
    Over, restart the service, it will be normal.
    Insert picture description here
    Finally, if you have other problems, I hope you find the wrong clues and solutions!

Guess you like

Origin blog.csdn.net/beauthy/article/details/112464779