Vue动态渲染图片路径报错问题及解决过程
更新时间：2026年07月02日 09:03:16 作者：识海．
这段文章主要讲述了在Vue项目中使用动态渲染加载图片时遇到路径错误的问题,通过将图片路径写为`require`的方式成功解决了问题,关键在于在于直接路径无法被webpack处理,需通过`require`引用
Vue动态渲染图片路径报错
今天在做项目的时候在本地assets中后动态渲染加载图片，死活加载不出来，F12控制台提示图片存在路径错误，但是不使用动态渲染，一模一样的路径，就可以渲染出来，就很神奇。
代码如下，可以看见动态渲染的地址直接写的地址一模一样，但就是渲染不出来。
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<img alt="Vue logo" :src="url" />
<HelloWorld />
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "App",
components: {
HelloWorld,
},
data() {
return {
url: "./assets/logo.png",
};
},
};
</script>其实原因就在于
放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理。
可在Vue CLI官网看出：
其中说到了直接路径
<img alt="Vue logo" src="./assets/logo.png" />会编译为 require('./image.png')
所以通过动态渲染不能直接写
data() {
return {
url: "./assets/logo.png",
};
},必须写上require
data() {
return {
url: require("./assets/logo.png"),
};
},这样图片就能成功渲染了
不在出现路径错误。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue-rx的初步使用教程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
VUE跨域问题Access to XMLHttpRequest at
今天发现一个错误，VUE发送请求的时候不能请求到正确数据，VUE跨域问题Access to XMLHttpRequest at，本文就详细的来介绍一下解决方法，感兴趣的可以了解一下2022-05-05
vue指令之表单控件绑定v-model v-model与v-bind结合使用
这篇文章主要介绍了vue指令之表单控件绑定v-model v-model与v-bind结合使用,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了vue元素实现动画过渡效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了关于el-col的使用,占据宽度的应用解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
最近在做一个vue的项目,碰到一点关于Map键值对传参的问题,下面这篇文章主要给大家介绍了关于Vue中如何使用Map键值对传参的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue 微信扫码登录(自定义样式)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
跨域问题是由浏览器引起的安全限制,而不是Vue框架本身导致的,Vue本身并不限制跨域访问,它只是一个前端框架,负责构建用户界面和处理数据逻辑,本文给大家介绍了在Vue中解决跨域问题的常用方式,需要的朋友可以参考下2023-10-10
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
这篇文章主要介绍了Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK ),非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-03-03
这篇文章主要为大家详细介绍了vue.js中使用mint-ui框架的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
最新评论