图片路径在js文件和css文件中引用的区别

Noora Xun

已于 2022-07-11 16:49:57 修改

阅读量384

点赞数

分类专栏：前端小知识点整理文章标签： html5 css 前端 javascript

于 2022-07-11 16:46:40 首次发布

本文链接：https://blog.csdn.net/Xun991223/article/details/125724503

版权

前端小知识点整理专栏收录该内容

4 篇文章 0 订阅

订阅专栏

目录，如下图所示：

1、js脚本文件

html中外联js文件，可以想象成将js代码放到了html文件中进行解析

<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="map.js"></script>
</head>

因此，在map.js中如果要引用图片，图片的路径应该相对于html文件。

设置为：

image: './style/point.png'

2、css文件

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="map.js"></script>
    <link rel="stylesheet" href="./style/home.css">
</head>

在css文件中引用图片，图片路径应该相对于css文件本身

background: url("point.png")

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Noora Xun

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue.js中引入图片路径的几种方式

weixin_39854011的博客

02-24

2752

vue中静态资源的引入机制 Vue.js关于静态资源的请查看：官方文档静态资源可以通过两种方式进行处理： 1、在 JavaScript 被导入或在 template/CSS 中通过相对路径(以 . 开头)被引用。这类引用会被 webpack 处理。诸如 <img src="..."、background: url(...) 和 CSS @import 的资源写在 template 中内联 style 的 background: url(...) 样式，在当前版本的测试中，即使使用了相对路径

如何在django中引用html文件路径,django项目如何引入css文件

weixin_39654751的博客

06-19

1096

大多数初学者都会疑惑这样一个问题：Django中如何引入css，html文件呢？问什么总是报错呢？下面我们来探讨一下这个问题。这个问题出在以Djiango做后台的前端界面上。按以往的习惯，css，js，image等静态文件直接在前端html中写好链接，直接丢上去就可以，但当把含外部css的html在丢到Django后发现，css并没有载入，自然，其他静态文件也是如此。原因分析出现这个问题其实是因为...

参与评论您还未登录，请先登录后发表或查看评论

css和js引用图片路径

lhg_119的专栏

03-15

3270

在JS文件中书写相对路径：JS文件是指在页面中引用的外部JavaScript文件，其中可能采用JavaScript代码生成html代码，由于生成的html代码是嵌入在引用该JS文件的页面中，因此，在描述相对路径时，应该使用被引用的文档或素材相对于引用JS文件的页面之间的相对路径。例如，文档“/home/www/a/index.htm”中引用了JS文件“/home/www/a/js/hello.js

css和js引用图片的路径问题

weixin_30640769的博客

07-19

1040

参考：http://www.cnblogs.com/chyingp/archive/2010/08/21/1805515.html html页面中，引用js脚本和css文件的机制是不一样的。 (1)对于js脚本，html是把脚本加载到页面中一起解析(就跟你的js脚本直接写在这个页面是一样的)； (2)而对css文件，则仅仅是提供一个连接，并不会将其加载到html页面中，如在下例中，...

Vue.js中的图片引用路径问题

weixin_30625691的博客

07-25

155

当我们在Vue.js项目中引用图片时，关于图片路径有以下几种情形：使用一：在data里面定义好图片路径： /*错误写法*/ imgUrl:'../assets/logo.png' 在template模板里面：/*错误写法*/ <img src="{{imgUrl}}"> 以上是错误写法，我们应该用v-bi...

通过js引入本地图片地址

ROC_Chen95的博客

12-03

6491

前言：一样的本地图片地址，通过img标签引用没问题，但是放在js里再导入引用就无效了。这是因为放在父页面的标签里会被webpack打包出来（具体的可以自己打开开发者工具f12，看看同样是img标签里的src属性），而在js里面写图片路径其实只是字符串，webpack不会处理。所以想在js引入本地图片的地址，可以通过import导入图片。代码如下。代码： import lvbuURL from '../assets/hero.png' export default { lvbu: { na

CSS与JS中的相对路径引用简单介绍

01-19

javascript和css文件中采用相对路径，其基准路径是完全不同的。 1.javascript引用资源(比如图片)相对路径是以宿主路径(被引用的网页比如你在首页index.php引用了某js文件，则index.php即为宿主)所处位置为基准。 2...

CSS 样式表中引用图片地址在各浏览器中的差异

09-27

文档指出，在使用Internet Explorer、Safari和Opera浏览器时，当CSS样式文件引用图片资源时，这些图片的Referer来源会是站点的主域名地址，而在Firefox浏览器中，情况则有所不同。在Firefox中，图片的Referer来源...

完美解决调用上级目录中的css样式文件的路径问题

09-25

由于不在同一个子目录，因此需要使用相对路径来正确链接到CSS文件。相对路径是一种根据当前文件的位置来指定文件位置的方法。它是相对于当前文件的位置，来指定目标文件的位置。相对路径的使用，对于链接资源文件...

CSS和JS引用图片（资源）的路径问题

weixin_30307267的博客

06-30

230

做项目时遇到了这个问题，特此写个笔记记一下转载于:https://www.cnblogs.com/xiayu25/p/7098315.html

javascript 和css图片路径的不同

gideal_wang的专栏

03-06

1798

一个html页面中，会引用到js脚本和css文件，在html展示的时候，引用这两种文件的机制是不同的。对于js脚本，html是把脚本加载到页面中一起解析，类似于jsp中的。对于CSS，它不会加载到html中，它只是一个链接，htmL根据链接去css中找需要的class对于这一点分析引用这两种文件的格式就可以看出：这种区别在js和css中有图片的时候尤为重要，很多人

CSS文件和JS文件组织

weixin_30650039的博客

07-25

183

在开发的时候会使用到多个CSS文件和JS文件，如何组织就成了一个问题。个人认为在开发的时候使用多个文件，这样方便查看，到发布的时候再用工作合并成一个。大概思路如下：一般包括两个文件，一个在开发的时候使用，一个在发布的时候使用，程序根据配置加载其中一个。例如有一个All-debug.css文件，在开发的时候使用，里面的内容是：@import url(../960/960-all.css);...

本地存储js和css文件

weixin_30319097的博客

12-26

136

往往我们在许多项目中都会使用许多第三方的插件和库（比如：jquery bootstrap等）,还有我们自己所写的js文件和css文件，当一个项目的js和css文件大到一定程度之后，用户每次打开网页都会重新请求http，向后台请求这些文件，虽然浏览器有一定的缓存能力，但是当我们所使用的js和css文件过多的时候也会造成http请求数目的增多，用户等待的时间变长。我在最近的项目中就遇到了这样的问题，所...

在jsp文件中和js文件中引入图片的方法

王小坏费了很多时间整理的东西

10-08

2000

project的目录结构如下：在jsp文件中插入图片的代码为在js文件中插入图片的代码为Ext.form.Field.prototype.msgTarget="qtip"; var pic = new Ext.Component({ width: 400, //图片宽度 height: 80, //图片高度 autoEl: {

vue 通过js引入图片的方式（解决项目线上图片无法展示的问题）

逆风优雅的博客

03-21

4235

首先将图片都引入，然后导出 import costContent_11 from '../../../assets/img/costContent_11.png' import costContent_12 from '../../../assets/img/costContent_12.png' import costContent_13 from '../../../assets/img/costContent_13.png' import costContent_14 from '../../.

html与css文档,css和js文件是什么？

weixin_42525261的博客

06-04

2336

css文件和js文件是什么？下面本篇文章就来给大家介绍一下css文件和js文件。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。css文件是什么？css文件是把css代码放入一个单独盛放css的文件，css是以.css为扩展命名的，我们看到以.css为后缀的文件就是css文件。它是一种与html语言配合使用制作网页的文件，它的作用主要是控制html文章的布局，简单的说就是控制网页的...

webpack项目引用CSS、JS、图片等文件

你的小可爱的博客~

07-13

1038

webpack打包时，项目中引入CSS、JS、图片不打包

Vue-cli构建项目, 组件中js代码引入图片路径问题

weixin_30765505的博客

07-04

280

问题描述 .vue的组件分成三个部分, template结构部分, script路径代码, style页面样式首先, 我们可以在template可以正确引入, 无论是dev, 还是build都没有问题, 在style中引入背景图的话, 我们在上一篇文章中已经解决. 这次我们发现如果需要在js代码中控制图片路径的显示, 使用:src的话, 直接写是错误的, 并不能打包, 在 dev 和 buil...

CI框架中JSCSS文件路径配置指南

此话题主要关注如何正确地引用样式表、图片和JavaScript文件，以便在CI环境中确保它们能够正常加载和执行。" 在CI框架中，设置静态资源如CSS和JS文件的路径通常是通过HTML标签和PHP的`base_url()`函数来实现的。`...