解决在vue中img标签不显示图片的问题

这篇具有很好参考价值的文章主要介绍了解决在vue中img标签不显示图片的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在vue中, 经常会遇到img标签不展示的问题, 本人遇到两种, 都是因为webpack打包, 导致找不到路径, 所以不现实,
总结几个可以解决本地图片路径显示不出来的问题:
1.把图片放在src同级的static文件夹下。
2.把图片放在cdn上,把网络地址存在imgUrl里,然后直接去展示。
3.图片放在assets文件夹,然后在data里面require进图片

下面是一些代码编写方式

情形一: 在template中,

<img :src='imgSrc'>,

<script>

export default {

	data(){
	
		imgSrc: require('本地图片路径')
	
	}

}

</script>

require是导入本地图片的一种方法, webpack打包也能找到正确图片路径

情形二:在template中

<div v-html='imgSrc'></div>

<script>

export default {

	data(){
	
		imgSrc: '<img src="图片放在public或者static下的路径">'
	
	}

}

</script>

因为webpack打包后, 图片的路径已经改变, 正常src下面的图片都无法展示, 所以可以将图片放进public或者static下, 项目运行起来就可以展示, 如果是开发环境正常是放在public文件夹下文章来源地址https://www.toymoban.com/news/detail-649528.html

到了这里,关于解决在vue中img标签不显示图片的问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用html2canvas将整个元素导出为图片,其中包含svg和img,解决img跟svg导出时img或svg(canvg处理)不显示的问题,以及相关优化

    目录 前言 一、准备 二、解决问题 1.将svg跟img转为canvas的方法 2.将base64转换成file文件的方法 3.点击下载使用方法 1).对dom没有处理,需求只是将图片导出即可  2).涉及对dom的拖拽,流程图之类的(需复制dom,在复制的dom上进行处理)  三、效果图如下 查阅很多相关的文章和

    2024年01月20日
    浏览(65)
  • vue中如何动态配置img标签的src

    我遇到问题:        我在做项目的时候,要根据后台给我返回的天气数据,然后动态的显示天气的图片,比如后台给我返回的数据是“晴”,那么大屏就要显示晴的图片,如果,后台给我返回的数据是“阴”,那么我就需要在大屏上显示阴的图片,但是我在给src动态的设置

    2024年02月14日
    浏览(37)
  • vue中图片不显示问题 - vue中静态资源加载

    在 JavaScript 被导入或在 template/CSS 中通过 相对路径 被引用。这类引用会被 webpack 处理后再输出到打包后的文件。 放置在 public(static)目录下或通过绝对路径被引用。这类资源将会直接被拷贝到打包后的文件 ,而不会经过 webpack 的处理。 在 config.js 的 build.assetsPublicPath 和 build

    2024年01月25日
    浏览(45)
  • vue3 动态(:src)绑定img图片

    webpack 创建的vue2可以通过 require对图片进行动态绑定 但vite创建的vue3则不可以通过require对图片进行动态绑定 可以通过一下方法进行绑定(注意vite根目录是 / ,且vite会自动解析src中的字符串)

    2024年02月13日
    浏览(41)
  • 图片引入---img标签

    img标签的作用是 :告诉浏览器我们需要显示一张照片, img标签运用的格式 : img  src=\\\"图片的路径\\\"  alt=\\\"对图片的解释说明\\\"/ 图片的来源路径有 两种:   1.本地图片:首先将图片添加至VScode文件中,然后根据图片的位置选择    ./ ( 当前文件路径)或者  ../ (上一级文件路

    2024年02月12日
    浏览(36)
  • HTML img标签识别base64图片格式

    红色框框为需要带上的格式,有这个格式img标签才能对base64进行解码,后面白色框框为base64编码 还有一些其他格式为: data:,文本数据 data:text/plain,文本数据 ;javascript:;,HTML代码 ;javascript:;;base64,base64编码的HTML代码 data:text/css,CSS代码 data:text/css;base64,base64编码的CSS代码 data:text/ja

    2024年02月16日
    浏览(39)
  • VUE+Vis.js鼠标悬浮title提前显示BUG解决方法

    在使用VUE+Vis.js做拓扑图,利用鼠标悬浮放在图标展示设备信息时,发现鼠标一放在图标上面时,标题表会提前在放置的元素下显示,鼠标再放到图标上去元素才会隐藏变成悬浮状态  解决方法: 添加一个div元素,设置 v-show=\\\"false\\\" ,将作为悬浮窗的元素放进去,因为v-show只是

    2024年01月23日
    浏览(53)
  • Vue动态设置img的src不生效的问题

    原因分析 在VUE项目中有时会遇到需要动态修改Img的src的情况,如果直接修改会使得图片无法显示出来 这是由于src被当做静态资源处理了,并没有进行编译。 解决办法 第一种 使用require引入图片 第二种 将图片先引入文件中 第三种 将图片放入vue项目的public文件夹中,在根目录

    2024年02月11日
    浏览(36)
  • 解决Vue.js Devtools未检测到Vue实例的问题

    在开发Vue.js应用时,Vue.js Devtools是一个不可或缺的调试工具。它能帮助开发者实时查看并操作Vue组件的状态、数据和方法等信息。然而,有时我们可能会遇到“Vue.js not detected”的提示,这意味着Vue.js Devtools未能成功识别和连接到我们的Vue应用。本文将详细解析这个问题,并提

    2024年01月16日
    浏览(38)
  • 【Vue.js】Vue3全局配置Axios并解决跨域请求问题

    对于前后端分离项目,前端和后端端口不能重复,否则会导致前端或者后端服务起不来。例如前端访问地址为: http://localhost:8080/ ,后端访问地址为 http://localhost:8081/ 。后端写好Controller,当用Axios访问该接口时,将会报错: Access to XMLHttpRequest at \\\' http://localhost:8081/login \\\' from

    2024年02月05日
    浏览(76)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包