HTML中img标签src路径的值需要设置成一个变量来表示

最新推荐文章于 2023-08-24 11:17:47 发布
最新推荐文章于 2023-08-24 11:17:47 发布
阅读量1.4w 收藏 19
点赞数 5
分类专栏： js 文章标签： HTML javaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/c_staunch/article/details/79880425
版权

在Java开发中，有时候会遇到在显示图片时不需要给图片的src路径设置成固定的，而是需要写入从后台数据库传入的路径变量，下面给出了解决此问题的方法。

<script>
   var pictureUrl = data.url;//后台传入的图片路径，url指的是数据库中图片的路径
   document.getElementById("picture").src = pictureUrl;
</script>
<body>
   <img id="picture" src="" alt="图片加载失败"/>
</body>

有时候用 $("#picture').src 可能会出错，原因是没有导入jquery包，请大家注意。
希望对大家有用！

C_staunch
关注
  • 5
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
11-20
动态设置img的src属性无效，而直接写可以 解决办法： imgSrc写成require(‘path’)； 原因： 动态添加src被当做静态资源处理了，没有进行编译 npm run build 后出现 xxxxxxx net::ERR_FILE_NOT_FOUND 解决办法： 进入：build文件夹 > 打开 webpack.prod.conf.js 找到：output 对象 添加：publicPath：‘./’ 具体写法： publicPath: process.env.NODE_ENV === 'production' ? './' +config.build.asset
src设置变量
weixin_30556959的博客
11-24 334
从后台得到一个图片路径,想把它设置给某个img的src属性,发现直接用$("#").attr("src",data)时src,jquery自己会在这个变量外面添加一组引号,导致路径出错,这时候可以通过重写该img的html代码来实现$("#uplodeLogo").html('<img id="showLogo" src='+data +'class="spuplodeimg"/&...
flask img标签图片中src链接添加变量问题（好坑啊，不过终于成功了！！）
Dontla的博客
04-25 2119
Flask 学习之：传入参数与字典，渲染动态网页 浏览器加载过一遍的页面，点击刷新，浏览器会做什么操作，会重新加载（css、js、html等）资源吗？ - lyrieek的回答 - 知乎 上面无视???? 解决方案 如图所示： 1后端： 前端： ...
vue页面img标签 src使用变量
程序员二胖
09-11 7709
1、使用网络上的图片资源 <template> <div> <img :src="imgurl"></img> </div> </template> export default { data() { return { imgurl: 'http://www.codedemeter.com/blogfile/19_222949_14.jpg' }.
关于img标签的src如何使用变量
yusdddd_的博客
05-06 3384
题主一开始在img标签中的src加入了变量，报了404的错误 然后问了同学，同学告知是因为img把变量认为是常量了，查了大概二十分钟，发现只需要src前面加个冒号，就能解决问题。vue 的v-bind 因为觉得是很简单的问题，但是查了很久才查到结果，所以记录下来，如果有人搜索到的话可以更快的帮助到想解决问题的人 ...
vue img中的src使用变量引用
chestnut栗子的博客
10-27 8495
vue img中的src使用变量引用 正常 img 的使用如下 <img src="../../assets/material-detail/title-red.png" height="98" width="98"/> 如果想用变量替代src中的路径，首先在export的data中定义好路径，此处一定要加require data() { return { cardImgList: require('../../assets/material-
html 的 <img>标签获取路径变量问题
weixin_30873847的博客
03-19 459
首先贴上代码： ofstream print(filename); if(!print) exit(-1); print<<"<html><body>"; for(int j=0; j<K; j++){ int id = result[j].id; string file=PATH+imgs[id]; ...
在html的img src=""中调用js函数或js变量来动态指定图片路径
09-28
本篇文章将详细介绍如何在`img`标签的`src`属性中调用JavaScript函数或变量来动态指定图片路径。 首先，让我们理解一下`src`属性的基本用法。在静态情况下，`src`属性会直接包含一个URL，如： ```html <img src=...
JavaScript正则表达式替换字符串中图片地址(img src)的方法
10-20
针对替换img标签src属性的问题，我们可以创建一个正则表达式来匹配img标签及其src属性。以下是一个示例： ```javascript const content = '<img src="//...
Vue中图片Src使用变量的方法
10-16
在尝试将图片的静态路径替换为变量时，开发者可能会遇到一个问题，即图片无法正确加载。例如： ```html <img :src="imgSrc" /> export default { data() { return { imgSrc: '../../static/images/web_bg....
Vue中img的src属性绑定与static文件夹实例
08-30
这是因为 img 的 src 属性绑定 URL 变量时，可能会使用本地图片的路径。例如，如果我们在 App.vue 中使用位于 src/assets/ 目录下的 logo.png 图片，我们可能会设置 `imgUrl = './assets/logo.png'`。但是，这种方法...
vue img图片里面地址改成变量使用
最新发布
wnk1997的博客
08-24 390
【代码】vue img图片里面地址改成变量使用。
微信小程序 - 详细实现＜image＞图片 src 路径动态拼接多个变量，小程序图像 src 路径在模板上进行变量拼接，路径有变量报错如何解决（详细示例代码）
王佳斌
04-30 8742
在微信小程序中对于动态图像 `src` 路径，您无法像正常 `Vue` 项目那样拼接变量路径，这归结于小程序框架底层。但在微信小程序中，您会收到报错提示。核心思路：将一切需要拼接的字符串，转为在 `data` 变量中存储，模板通过 `{{ }}` 进行连接。这种问题有很多解决方案，比如在函数中直接处理好最终图片路径，模板直接使用。 本文之所以选择之，是因其 **灵活** 特性，适用于多场景，因为您可以通过 `js` 对其进行动态改变，从而改变视图。
html<img>标签中src=“图片路径”，怎么用变量替换路径
热门推荐
lovewingss的博客
03-29 4万+
bg0.gif~bg5.gif fChBg=function(szID){ var dwMax=5; //定义图片上限0~5 var szPic="bg";//定义图片名前缀 var szExt="gif";//定义图片后缀 document.getElementById(szID).style.backgroundImage="url("+szPic+Math.floor(Ma
HTML5 图片标签 img
前端工程师，博文都是自己学习到的，或者开发中遇到的点，记录一下
06-01 480
图片标签 img 属性：src图片路径 height图片高度 width图片宽度 border图片边框 align对齐方式（只有left 和 right） alt当图片加载不出来时显示的文字 title当鼠标划过时显示的文字 两种路径： 相对路径 绝对路径 相对路径：完整的描述文件所在的位置， 本地c：\ 服务器https：// 绝对路径：相对于目标文件位置， 下级 文件名/ 上级../ 本级 直接写 ...
html中的src拼接变量
yikouyigedou的博客
02-02 4620
使用thymeleaf拼接路径： <source th:src="@{/static/upload/{videoName}(videoName=${video.name})}" >
vue的image标签中src引用变量出现的问题
qq_54537215的博客
06-04 1611
vue的图片路径变量引入问题
angular.js 如何在js文件中修改html 中img标签的路径
05-26
可以使用AngularJS中的ng-src指令来修改HTML中img标签的路径。 首先，在HTML中给img标签添加一个ng-src属性，它的值为一个变量名，这个变量名表示图片的路径。例如： ``` <img ng-src="{{imagePath}}" alt="My Image"> ``` 然后，在JavaScript文件中，使用$scope对象来修改这个变量的值，从而改变图片路径。例如： ``` $scope.imagePath = "images/my-image.jpg"; ``` 在这个例子中，$scope.imagePath的值被设为"images/my-image.jpg"，所以img标签的src属性将被设置为这个路径。 当然，你也可以在JavaScript中使用jQuery等库来修改img标签的src属性，不过这种方法可能会导致AngularJS的双向数据绑定失效。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值