Vue动态渲染图片路径报错问题及解决过程
作者：识海．
这段文章主要讲述了在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"),
};
},这样图片就能成功渲染了
不在出现路径错误。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。