vue 动态显示图片报错 404

<img :src="data:image"/>

当我们动态加载图片的时候会出现如下图错误

1.第一种可能，是你写了相对路径引起的，你需要写绝对路径

image:'../assets/image/top10-1.png'
你需要改成具体路径
image:'/src/assets/images/top10-1.png'

2.第二种解决方式你要使用require()

<img :src="require(images)"/>

3.第三种解决方式把图片放在public目录下面，但是这样虽然解决了问题，使用webpack打包的时候不会把这里面的文件打包进去。
4.如果你使用了ts 那么就无法使用require(),你可以使用import 把你的图片路径作为一个模块引进来使用

<template><img :src="data:images"/>
</template>
<script>import image from '../assets/image/top10-1.png'export default{data(){return {images:image}}}
</script>

vue 动态显示图片报错 404相关推荐

vue 打包后访问接口报错404 解决方案（前提是在vue里使用了代理）
vue 打包后访问接口报错404 解决方案 (前提是在vue里使用了代理) 参考文章: (1)vue 打包后访问接口报错404 解决方案 (前提是在vue里使用了代理) (2)https://www. ...
vue项目dist编译文件部署到服务器：页面空白、F5刷新报错404、403报错、等等bug - 总结篇
文章目录问题一. vue编译打包dist文件之后部署到线上服务器 ,访问页面却是空白? 问题二.如果不是空白,页面F5之后就又变成空白? 以Nginx服务器为例,(如下图FTP所示) `404报错: ...
Vue框架Vue-cli脚手架引入图片报错
Vue框架Vue-cli脚手架引入图片报错一.import导入图片方法第一步:在.vue文件中import edit from 'path'(path是图片与.vue的相对路径) 第二步:在dat ...
vite：vue中引入图片报错require is not defined
问题在 vite 项目中这样引入图片报错 images: require('../assets/images/right.png') 改为 images: new URL('../assets/im ...
vue组件中引入public文件，build打包后找不到资源报错404
在组件中我使用object标签预览pdf文件 <object width="100%" height="100%" data="/help/he ...
vue-cli中mock本地json数据踩雷：报错404 （GET http://localhost:8080/goods 404 (Not Found) ）
标题vue-cli中mock本地json数据踩雷:报错404 运用vue的脚手架进行了项目的搭建,想要通过json文件模拟后台传输数据,结果一直报错:404,经过不断的查找资料和调试终于找到问题的所在 ...
Vue项目初期报错问题记录大全
这里写自定义目录标题 Vue项目初期报错问题记录大全 1.vs终端无报错,浏览器加载空白,发现Cannot read properties of null (reading 'nextSibling' ...
404页面模板php,Thinkphp5老司机网站报错404页面模板源码
来,来,来,学习下怎么做前端页面,分享个老司机网站报错404页面模板源码, 另外给提个建议,最好是有个地方可以上传源码文件的,这样子格式就不会有什么问题了.一般复制出去大家最好都用UTF-8格式. H ...
分享个老司机网站报错404页面模板源码
版权声明:转载请注明原创地址 https://blog.csdn.net/u013032788/article/details/80623193 来,来,来,要不要学习下怎么做前端页面,分享个老司机网 ...

vue 动态显示图片报错 404

vue 动态显示图片报错 404相关推荐

最新文章

热门文章