vue动态添加图片，路径正确但加载不出来

使用require处理图片路径的技巧

最新推荐文章于 2024-10-12 11:13:17 发布

原创最新推荐文章于 2024-10-12 11:13:17 发布 · 917 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

Vue 专栏收录该内容

4 篇文章

订阅专栏

本文探讨了在Vue模板中如何使用require关键字处理相对路径和绝对路径的图片资源，展示了在<div v-for>循环中加载图片的例子，确保在不同环境下都能正确显示。

如下图在路径前加上require后，相对路径和绝对路径都能正常显示。

<div v-for="item in banner" :key="item">
    <img :src="item.src">
</div>

banner:[{
		src: require("../assets/426.jpg")
	},
       {
		src: require("D:"+"\\"+"demo"+"\\"+"src"+"\\"+"assets"+"\\"+"2.jpg")
    }]

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

sd_zhao18

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

自己解决在Vue中动态渲染图片不显示的问题

张浔优快云

05-12

1万+

乐于助人前言分析思路1. 绝对路径2. 相对路径总结本篇文章记录的是自己在 Vue-Cli2 中如何去解决的这个问题，心里路程比较多，所以话比较多哈哈，感谢阅读，大概耗时2分钟前言如上图所示，我的图片就是储存在了 assets/images/ 目录下，但是结果不显示，这个问题其实早就遇到了，当时查阅资料之后就解决了，大概原理也不是很深，解决的方式也并不复杂，所以就没有记录，但是今天写了一个小案例时，这个问题冒出来给我整郁闷了，我怀疑是不是自己记错了解决的方式了，我去查资料，并没有什么问题，最

vue中img src 动态加载本地json的图片路径写法

10-17

在Vue.js应用中，我们经常需要动态加载图片，特别是在处理数据源时，这些数据源可能包含图片路径。本文将深入探讨如何在Vue中使用`img`标签的`src`属性动态加载本地JSON文件中存储的图片路径。首先，重要的一点是...

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

【Vue】】img使用 :src 动态绑定图片地址，但是加载图片不成功

y_coder的博客

07-31

6151

img标签直接动态绑定图片的相对路径的时候，图片不能正常显示。动态地址，路径被加载器解析为字符串，所以图片找不到。设置绝对路径或者相对路径是改为用。引入才能成功，就可以动态使用了。

解决js设置svg image，图片无法显示问题

热门推荐

李菇凉的博客

09-05

2万+

用setAttribute来设置svg的image的路径，图片无法显示要用 image.href.baseval 才会有效 var svgDoc = document.getElementById("sketchpad"); var imgSVG = document.createElementNS("http://www.w3.org/2000/svg", 'image'); img...

【Vue】img使用 :src 动态绑定项目图片，加载失败

xiaoxiqo的博客

08-04

630

参考文献：vue 项目效果展示不出：

在vue项目中，如果需要动态绑定项目本地图片的画，有时会加载不出来

ctAnnice的博客

08-08

350

在vue3.0项目中，如果需要动态绑定项目本地图片的画，有时会加载不出来，为了解决这个问题，我遇到了2次。每次曾经花了半天到1天的时间进行解决，在此记录一下： (1). 处理路径，取到项目中 / 根路径 setup(props) { const baseUrl = reactive({ photo: process.env.BASE_URL,//图片基地址 })// "/" const imgUrl = computed(() => `${baseUrl.phot...

解决vue的 v-for 循环中图片加载路径问题

10-18

例如，如果图片存储在`src/img`目录下，但Vue CLI打包后，图片路径会改变，需要使用相对路径或者绝对路径来确保在生产环境中也能找到图片。 2. **懒加载**：在大量图片加载时，考虑使用懒加载策略，以提高页面加载...

Vue动态加载图片在跨域时无法显示的问题及解决方法

10-15

在实际开发中，我们通常会使用Webpack工具来打包静态资源，而Webpack的url-loader插件会把图片文件打包到一个统一的位置，如果动态绑定的src路径没有正确指向这个位置，那么图片就无法正确加载。为了解决这一问题...

解决vue动态路由异步加载import组件,加载不到module的问题

10-15

但是，在动态路由中使用import()函数加载模块时，可能会遇到“加载不到module”的问题，本文将针对此类问题展开讨论，并提供解决方案。 ### Vue动态路由与异步加载import组件动态路由是指路由地址或参数在应用...

Vue组件中本地静态图片路径的正确写法

最新发布

07-22

这样，Vue 会根据动态生成的路径去加载对应的图片。在 Vue.js 中，还有一种常见的图片路径引用方式是通过 import。这种方式适用于图片路径是已知且固定的情况。例如，import img from '@/assets/images/图片名称....

vue循环绑定img图片路径加载不出来？使用这两种方法绝对好使

一家外包公司的码农，专职前端开发

01-20

9462

相信来到这里，应该是图片路径的难题困扰了你。我的图片路径明明是正确的呀！为什么图片出不来呢？其实是引入方式的问题，还是老样子，我们直接上方法。第一种：使用require引入本地图片路径。第二种：使用远程服务器图片路径。第三种：（大聪明——自研失败品：可忽略不看）修改本地路径与vue项目路径保持一致。第一种：使用require引入本地图片路径。 <template> <div> <!-- 循环遍历data中的img数据绑定index --&

Vue中显示动态绑定的img图片，显示不出来

laiyuan999的博客

03-25

2347

1、如何是一个普通组件的话，那么这样就可以了 <img :src="./static/images/logo.png" 上面这种是写死的，下面让我们试试进行动态显示； <div id="head"> <img :src="logo" id="logo">  <...

Vue3无法动态绑定图片问题

m0_60043298的博客

03-11

1446

图片路径正确却无法显示，不使用绑定变量可以正常显示而使用后却无法显示

在Vue组件中使用静态路径可以正常显示图片，但使用动态绑定时无法正常显示。

weixin_72251443的博客

09-18

1120

这是因为在Vue的模板中，使用静态路径可以正确地将图片资源引入，而动态绑定的路径则需要特殊处理。在Vue中，如果你想在模板中使用动态路径，你可以使用。我们使用了ES6的模板字符串来动态拼接路径，同时使用了。来确保正确引入图片。请注意，假设图片位于。子目录下，你可以根据实际情况调整路径。来确保正确引入图片。

img标签 :src 动态绑定图片地址，但是加载图片不成功

weixin_66549669的博客

10-12

1315

在使用 Vue CLI 构建的应用程序中，Vue CLI 默认使用 Webpack 作为构建工具，Webpack 支持require语法来引入静态资源（如图片）。

vue 动态获取的图片路径不显示_解决Vue动态加载本地图片问题

weixin_39602579的博客

12-22

2588

最近遇到了个问题，用v-bind动态绑定img的src，图片加载不出来。控制台显示src是有获取到图片地址的，可是就是加载不出来。最后才发现原因原来是浏览器中直接显示'./img/img1.png'，也就是没有经过编译的步骤，直接将获取到的数据当作字符串显示。解决方法：1.在当前界面全局import图片地址//使用import引入import img1 from './img/img1.png'i...

（已解决）VUE中网络资源图片加载失败

cnhyls的博客

05-06

922

在vue3中，使用v-bind绑定图片的src属性，浏览器正常能正常渲染出来，但是图片加载不出来。在index.html文件中加入如下代码。

vue项目中动态绑定src不显示图片解决方法

bfh188831554的博客

03-14

1150

图片的本地相对路径需要使用require包裹 data() { return { img_src:require("../../assets/images/mirror-service.png)" } }

vue访问路径(或者图片)无法加载是因为少了require

Ryan_black的博客

02-06

1787

如题目,只需要写一个require包裹路径即可 url : require(’…/assets/image/background/Cartoon.jpg’)

vue加载不出来图片

11-09

Vue.js加载图片有时可能会出现问题，可能是由于以下几个原因： 1. **路径问题**：确保你在`<img>`标签的`src`属性中提供的图片路径是正确的。如果图片位于静态文件夹（如`static`），记得使用相对路径或者设置`publicPath`。 ```html <img :src="require('@/assets/image.jpg')"> ``` 或 ```javascript <img :src="process.env.PUBLIC_URL + '/assets/image.jpg'"> ``` 2. **懒加载**：如果你使用的是Vue的懒加载库（如vue-lazyload），检查配置是否正确并且图片是否已经在首次请求时完成加载。 3. **网络问题**：如果网络连接不稳定，图片可能加载失败。你可以添加错误处理，显示占位图或者等待一段时间后再尝试加载。 4. **组件生命周期**：确保图片是在组件渲染之后才开始加载的，比如在`mounted()`钩子里。 5. **图片格式兼容**：某些浏览器可能不支持某些图片格式，需要确保你的图片是常见的格式（如`.jpg`, `.png`, `.gif`）。 6. **CDN问题**：如果图片是从CDN加载，确保CDN服务正常，并且你的应用可以访问到这个资源。解决这些问题后，通常需要检查控制台是否有相关的错误信息以帮助定位问题。如果有进一步的问题，可以提供具体的代码片段以便更准确地分析。