react require图片路径问题

在require中引用本地图片时需要使用require(require里的值必须为字符串)

本地测试时, 如后端返回图片路径为'../static/img/img1.jpg',

使用props传入显示图片的组件

在子组件中引入该路径(引入失败):

此时看到控制台报错

觉得很奇怪, 我在前端写死图片路径, 如下(图片均能正常引入):

或者

把require放入表达式中引入失败:

后来把路径拆分如下, 引入成功:

修改服务器返回的路径为'static/img/img1.jpg', 在前端拼接后require(引入成功):

试了试, 如果不更改返回路径, 前端拼接空字符串如下也是引入失败的:

react require图片路径问题相关推荐

react simditor 上传成功修改图片路径
这里贴出simditor官方文档:http://simditor.tower.im/docs/doc-usage.html 1.npm install simditor 2.直接贴代码了 import ...
map遍历react中img图片路径出错
原来我的方法是 const lineBottoms = [{title: '社保代缴',img: '../images/productIntroduce/u1178.png',},{title: '工 ...
html img路径 404,webpack css背景图片无法现实，图片路径404
项目引入sass,然后,尼玛,图片死活不显示-- 然后看下,尼玛,路径404,什么鬼? 然后,编辑中级编辑css,是好的啊-- 这么到webpack里面,就不认图片路径了呢?// require('n ...
vue引入图片路径的三种主要方法
1.在js代码里面或者 html里面用"v-bind:"或":属性名"绑定路径的时候使用 require('@/assets/home/imgName.png ...
vue样式引入图片_详解Vue.js中引入图片路径的几种方式
vue --version 3.6.3 记录总结一下的Vue中引入图片路径的几种书写方式 vue中静态资源的引入机制 Vue.js关于静态资源的官方文档静态资源可以通过两种方式进行处理: 在 Jav ...
vue 直接访问静态图片_vue中本地静态图片路径写法
这篇文章给大家介绍了vue中本地静态图片路径写法及Vue.js中引用图片路径的方式,需要的朋友参考下吧这里写图片描述需求:如何components里面的index.vue怎样能把assets里面的 ...
html图片分开,webpack单独分离打包css，css里引用的图片路径错误，怎么解决？
现在我的这个项目是将css和js单独打包出来,打包后的目录结构和打包前一致. 打包前: 从这张图可以看到,如果是css文件夹根目录下的css文件引用images文件夹下的图片应该使用../就可以了,如 ...
vue-cli脚手架下，assets中的图片路径使用变量？
1.问题使用vue-cli的webpack模版做脚手架.页面中某区域的内容被作为组件,在 instruction.vue中进行编写,它包括3个格式相同.内容不同的区块,我希望用把里面各自不同的文字. ...
Vue-在data中引入静态图片路径
在data中引入静态图片路径首先tempate中内容都一样: <template slot="pic" slot-scope="{ row }"> ...

react require图片路径问题

react require图片路径问题相关推荐

最新文章

热门文章