Vue.js 图片不显示 | 图片资引用 | img src 路径出错

最新推荐文章于 2025-05-10 21:44:45 发布
原创 最新推荐文章于 2025-05-10 21:44:45 发布 · 1.1w 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种在Vue项目中加载Logo图标的方法。具体步骤包括：1. 在data部分设置logo路径；2. 在模板中插入img标签并引用logo变量。

解决方法：

      1、在data 里写入  logo: require('../assets/images/logo.png')

      2、在模板中写入 <img :src="logo">

VUE3语法--img图片不显示/img的src动态赋值图片显示
雾林小妖的博客
11-27 2万+
在VUE中，img中的src动态赋值的之后，无法显示图片出现404.以及VUE中通过require访问静态资源出现的Uncaught Error: cannot module ‘asstes/logo.png’问题。
vue3 - vite项目打包部署服务器上线后图片不显示并且路径中存在undefined字眼，本地开发环境下正常显示图像没任何问题，但build编译打包后上传到线上服务器后再打开就不显示了，路径有问题
高级前端工程师
08-18 4655
vue3，vite，图片不显示，图像加载失败，打包后图片路径不对，前面多了一个undefined，本地没问题只要打包上线就报错，vue3 vite项目解决部署线上图片URL失效问题，使用本地图片打包后不显示，本地资源路径，本地图片图标，图标不显示，打包后图片失效的问题，访问图片/图标不显示的问题，vue3+vite打包后图片路径错误不显示，背景图打包之后访问路径错误问题的解决，打包部署到服务器上却显示路径undefined问题，图片url域名错误，导致无法显示，还是报错显示不了，如何解决，无效，还是不行，r
img src 无法显示图片问题
qq_37759308的博客
05-31 3717
在vue中如果利用v-for进行循环 循环体中image的src可能解析不出来 ```html <div class="baseCourseColumn" v-for="(item,index) of baseCourseColumn" :key="index"> <img :src="item.image" class="baseCourseImage2"> <div class="baseCourseTitle">{{item.baseCourseTitle}}&l
浏览器控制台报JS脚本执行错误：Module is not defined
weixin_41129148的博客
11-08 1万+
现在JS分成了两个分支，一部分在服务器端发展如NodeJS，一部分是传统的浏览器运行环境。 有些插件在编写JS代码时，是针对Node编写的，所以直接在浏览器中使用会报错，通常是: require is not defined module is not defined 解决第一个错误的方法是，去除require，直接在页面中使用script标签加载，或者使用require.js。 解决第二个错误的方法是把原来的代码改写为兼顾浏览器和服务器类型的代码，示范如下： if (typeo
img标签 src路径正确 但图片不显示
xingguangtu的博客
08-09 1万+
问题描述 用浏览器请求时,图片正常显示 src内的链接也是正确的 解决方案 head标签插入如下代码: <meta name="referrer" content="no-referrer" /> 加入以上meta标签配置 本人才疏学浅，原理自己还没搞明白。也欢迎各位大牛批评指正！ ...
Img标签绑定:src不显示图片
kkk_3399的博客
10-27 2622
Img标签绑定:src不显示图片 一、问题 Img的src路径，使用:src绑定的 路径是没有问题的 二、解决 使用require
解决vue v-for src 图片路径问题 404
10-16
本篇分享将详细讲解如何在Vue中使用v-for循环时正确设置图片src路径，以及如何处理图片资源加载失败的问题。 首先，需要明白的是，在Vue中使用v-for指令时，图片资源的路径不能仅作为字符串处理，因为webpack在构建...
vue中当图片地址无效的时候,显示默认图片的方法
10-18
在上面的代码中，`:src="item.img"`是绑定图片源地址，`@error="imgError(item)"`表示当图片加载出错时调用`imgError`方法。在`imgError`方法中，通过`require`函数引入了默认图片，并将其路径赋值给`item.img`。 ...
vue :src 文件路径错误问题的解决方法
08-27
假设我们有一个图片列表，使用 JavaScript 动态加载图片，但发现图片不显示，错误码为 404。这是因为在 Webpack 中，图片会被当做模块来用，因为是动态加载的，所以 url-loader 无法解析图片地址，然后 npm run dev ...
前端使用 Vue.js 实现图片懒加载功能
最新发布
小白菜的博客
05-10 967
图片懒加载是现代Web开发中一项重要的性能优化技术，特别是在图片密集型的网站和应用中。本文旨在全面介绍如何在Vue.js框架中实现高效、可靠的图片懒加载功能，涵盖从基础概念到高级实现的全过程。介绍图片懒加载的基本概念和原理分析传统实现与现代API的差异提供多种Vue.js实现方案进行性能对比和优化分析探讨实际应用场景和最佳实践懒加载(Lazy Loading)：延迟加载非关键资源的技术，当资源需要显示时才加载：现代浏览器提供的API，用于异步观察目标元素与祖先元素或视口的交叉状态。
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
vue mint-ui v-bind img标签的src 图片不显示
weixin_34197488的博客
01-09 1574
本来以为是mint-ui组件的问题，后来找了一下，发现是路径的问题。如下的路径是不行的：正确的路径如下，即用require（）方法处理路径：资源经过loader处理，变成处理好的文件。如果不用require的话，图片资源是不会加入的。肯定可以通过配置解决这个问题，在研究。 ...
HTML Img标签 src为网络地址无法显示图片问题解决
m0_72929120的博客
06-30 2050
在前端可以通过meta来设置referrer policy(来源策略)，referrer设置成no-referrer，发送请求不会带上referrer信息，对方服务器也就无法拦截了。上面出现403就是因为，请求的是别人服务器上的资源，但把自己的referrer信息带过去了，被对方服务器拦截返回了403。http请求头中有一个referrer字段，用来表示发起http请求的源地址信息。服务器端在拿到这个referrer值后判断请求是否来自本站。若不是则返回403，从而实现图片的防盗链。
vue中图片img引用
jieweiwujie的博客
09-17 292
另一种方式是
vue中引用图片
heerey525
12-21 1763
一、template中引用图片 1. 直接用 <template> <img src="@/assets/images/img.png"> <img src="../../../assets/images//img.png"> <template/> 2. import引入 <template> <img :src="imgUrl"> <template/> <script> import imgUrl
HTML，img标签src路径错误及src路径图片无法显示问题，相对路径和绝对路径，超级详细的新手教程。
热门推荐
weixin_42868605的博客
06-01 4万+
今天在学习 做实例的时候 发现 img 标签里面的图片不显示， 结果是路径的问题，在这写下 路径的正确写法，方便以后查阅， 路径用 \ 或者 / 表示， 但是最后 图片名的时候 必须用 / 还有 路径前面的 两个点 不能漏掉 人生就像一只储蓄罐,你投入的每一分努力,都会在未来的某一天,回馈于你。而你所要做的,就是每天多努力一点. ...
vue引入图片的方式
weixin_45765215的博客
12-11 1527
在 vue 项目中，常用的引入图片的方式有 4 种。
vue 引入图片的使用方式
weixin_44166439的博客
02-07 1180
public 使用根路径，字符串和变量都行 其他文件夹 使用的是相对路径，字符串没问题 如果是变量必须用import引入图片 <template> <div class="my-header"> <!-- public下面的图片直接写/根路径 --> <img src="/favicon.ico" alt=""> <!-- public下的变量可以生效 --> <img :src="imgUrl1" alt
如何在vue中引入图片？
weixin_33851177的博客
02-24 1120
当我们在Vue.js项目中引用图片时，关于图片路径有以下几种情形： 使用一、 我们在data里面定义好图片路径 imgUrl:'../assets/logo.png' 然后，在template模板里面 <img :src="imgUrl"> /*或者*/ <img src="../assets/logo.png"> 这种方式是按照正常...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值