首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用javascript根据引用URL更改IMG SRC

使用JavaScript根据引用URL更改IMG SRC是一种动态修改网页中图片路径的方法。通过这种方式,我们可以根据不同的条件或事件,动态地改变图片的显示内容。

具体实现方法如下:

  1. 首先,我们需要获取到需要修改的图片元素。可以通过getElementById、getElementsByClassName、querySelector等方法来获取到对应的图片元素。
  2. 接下来,我们可以使用JavaScript中的setAttribute方法来修改图片的src属性。通过将新的图片路径作为参数传递给setAttribute方法,即可实现图片路径的更改。

下面是一个示例代码:

代码语言:txt
复制
// 获取图片元素
var imgElement = document.getElementById("image");

// 获取引用URL
var url = document.referrer;

// 修改图片路径
imgElement.setAttribute("src", url);

在上述代码中,我们首先通过getElementById方法获取到id为"image"的图片元素。然后,使用document.referrer获取到引用URL,并将其赋值给变量url。最后,通过setAttribute方法将url作为新的图片路径,从而实现了根据引用URL更改图片路径的效果。

这种方法可以应用于各种场景,例如根据用户点击的链接来显示不同的图片,或者根据不同的页面来源来展示不同的广告图片等。

腾讯云相关产品和产品介绍链接地址:

腾讯云提供了丰富的云计算产品和服务,其中与前端开发和图片处理相关的产品包括:

  1. 腾讯云对象存储(COS):提供了高可靠、低成本的云存储服务,可用于存储和管理图片等静态资源。产品介绍链接:https://cloud.tencent.com/product/cos
  2. 腾讯云图片处理(CI):提供了丰富的图片处理功能,包括缩放、裁剪、旋转、水印等,可用于对图片进行动态处理和优化。产品介绍链接:https://cloud.tencent.com/product/ci

以上是腾讯云提供的与问题相关的产品和服务,可以根据具体需求选择适合的产品来实现图片路径的动态修改。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • vue如何动态加载本地图片

    通常,我们的一个img标签在html中是这么写的: img src="../images/demo.png"> 这种写法只能引用相对路径下的图片。不能使用绝对路径。...2、使用**import**引入图片 img :src="src"> //使用import引入 import img from '...../images/demo.png' //data中定义变量src data() { return { src: img } } 3、使用**require**动态加载 img :src...原理 从相对路径导入 当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时,该资源将会被包含进入 webpack 的依赖图中。...这个问题是用file-loader解决的,file-loader可以解析项目中的url引入(不仅限于css),根据我们的配置,将图片拷贝到相应的路径,再根据我们的配置,修改打包后文件引用路径,使之指向正确的文件

    4.2K20

    干货 | 学习XSS从入门到熟悉

    标签 img src=x onerror=alert(1)>img src=javascript:alert(1)> //IE7以下 form 标签 Javascript...如果是在js中,我们可以用反引号代替单双引号: img src=x onerror=alert(`xss`);> 绕过括号过滤 当括号被过滤的时候可以使用throw来绕过。...JavaScript解析模式,而 src、 href 后边加入的 javascript 伪URL,也会进入 JavaScript 的解析模式。...img src=x onerror=alert("xss")> 但是要注意,对于HTML字符实体,并不是说任何地方都可以使用实体编码,只有处于 “数据状态中的字符引用”、“属性值状态中的字符引用” 和...URL编码 我们可以并将src或href属性中的内容进行URL编码,当HTML解析器对src或href中的字符完成HTML解码后,接下来URL解析器会对src或href中的值进行URL解码。

    4.6K42

    webpack 学习笔记系列04-资源处理优化

    2. css 处理 2.1 css-loader webpack 中一切皆模块,css 文件可以在 JavaScript 中被直接引用,但不能解析 css 语法,css-loader 能将 css 转成字符串供...file-loader:根据配置项复制使用到的资源(不局限于图片)到构建后的文件夹,并更改对应的链接 url-loader:包含 file-loader 全部功能,并能根据配置转换为 Base64 方式引入.../' } } webpack 打包后结果如下: img src="http://xxx.com/img/xxxxxx.png" /> src="http.../src/assets') } } } 在html中使用alias: img src="~@assets/img/large.png" /> 在css中使用alias: .bg-img...和 svg-url-loader 之前完成图片优化,避免在多个loader中重复引用 }] } }; 4.5 使用 PostCSS 生成 CSS Sprite 雪碧图 安装 loader

    1.7K120

    你不知道的 Blob

    这种行为类似于 JavaScript 字符串:我们无法更改字符串中的字符,但可以创建新的更正后的字符串。...Blob 对象,然后使用 createObjectURL() 方法创建一个 objectURL,然后把它赋值给 img 元素的 src 属性从而显示这张图片。...它允许引用 img>、 中的 Blob,但如果你访问的 Blob URL 不再存在,则会从浏览器中收到 404 错误。 上述的 Blob URL 看似很不错,但实际上它也有副作用。...针对这个问题,我们可以调用 URL.revokeObjectURL(url) 方法,从内部映射中删除引用,从而允许删除 Blob(如果没有其他引用),并释放内存。...如果数据是文本类型,你可以直接将文本嵌入(根据文档类型,使用合适的实体字符或转义字符)。如果是二进制数据,你可以将数据进行 base64 编码之后再进行嵌入。

    4.3K20

    Vue处理静态资源及publicstaticassets目录的区别

    Vue 静态资源可以通过两种方式进行处理: 1、在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。...从相对路径导入 当在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时,该资源将会被包含进 webpack 的依赖图中。...编译过程中,所有诸如 img src="...">、background: url(...) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖。 例如,url(....这意味着你甚至可以引用 Node 模块中的资源: img src="~some-npm-package/foo.png"> 如果 URL 以 @ 开头,它也会作为一个模块请求被解析。...那么就是说只要在 src 目录下的文件都会被 webpack 处理?事情还没完,继续往下看。 接下来我又在根目录创建了 static 目录,进行引用。 img src="../..

    1.5K20

    Vue处理静态资源及publicstaticassets目录的区别

    Vue 静态资源可以通过两种方式进行处理: 1、在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。...从相对路径导入 当在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时,该资源将会被包含进 webpack 的依赖图中。...编译过程中,所有诸如 img src="...">、background: url(...) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖。 例如,url(....这意味着你甚至可以引用 Node 模块中的资源: img src="~some-npm-package/foo.png"> 如果 URL 以 @ 开头,它也会作为一个模块请求被解析。...那么就是说只要在 src 目录下的文件都会被 webpack 处理?事情还没完,继续往下看。 接下来我又在根目录创建了 static 目录,进行引用。 img src="../..

    28.5K92

    Blob

    这种行为类似于 JavaScript 字符串:我们无法更改字符串中的字符,但可以创建新的更正后的字符串。...Blob 对象,然后使用 createObjectURL() 方法创建一个 objectURL,然后把它赋值给 img 元素的 src 属性从而显示这张图片。...它允许引用 img>、 中的 Blob,但如果你访问的 Blob URL 不再存在,则会从浏览器中收到 404 错误。 上述的 Blob URL 看似很不错,但实际上它也有副作用。...针对这个问题,我们可以调用 URL.revokeObjectURL(url) 方法,从内部映射中删除引用,从而允许删除 Blob(如果没有其他引用),并释放内存。...如果数据是文本类型,你可以直接将文本嵌入(根据文档类型,使用合适的实体字符或转义字符)。如果是二进制数据,你可以将数据进行 base64 编码之后再进行嵌入。

    6.2K40
    领券