【workaround】ReactJS中已配置Webpack的publicPath后图片仍无法加载

折腾：

【基本解决】ReactJS的项目如何打包发布

期间，

问题其实是：

对于

less的css中的图片：

在开发环境中是

(地址是：http://localhost/xxx)

可以正常加载的。

但是在生产环境中，由于url中加了前缀/uapp/,地址是：

http://116.62.25.57/uapp/xxx

图片的地址就还是之前的：

http://116.62.25.57/assets/ei_up.png

而不是希望的：

http://116.62.25.57/uapp/assets/ei_up.png

从而导致图片无法加载显示了。

细节是：

已经配置了：

webpack.config.babel.js

但是结果还是部分的image图片加载不出来：

对应着css中的：

对应使用的是css中的url：

和：

img sr：

但是，其他的图片，比如：

底部的tab图片，却是可以加载出来的：

对应的是使用的是require：

对于：

assets/top01.jpg

的问题，去看了看：

去试试，改一下:

结果生成的图片还是没有加上对应的前缀：

output.publicPath

webpack publicPath assets still can not find image

How to deal with relative public path · Issue #46 · webpack-contrib/file-loader

Loading assets (like images) by url with webpack · Issue #62 · jedwards1211/meteor-webpack-react

publicPath parameter doesn’t work? · Issue #246 · webpack-contrib/extract-text-webpack-plugin

node.js – webpack css-loader not finding images within url() reference in an external stylesheet – Stack Overflow

去换成：

试试效果。

但是根据：

javascript – What does "publicPath" in webpack do? – Stack Overflow

的解释，此处的设置：

/uapp/

应该是可以的，可以使得：

代码中的：

<img src="/assets/top01.jpg" />

会被自动解析到：

http://116.62.25.57/uapp/assets/top01.jpg

但是此处却没有。

参考：

javascript – Webpack outputs wrong path for images – Stack Overflow

node.js – webpack css-loader not finding images within url() reference in an external stylesheet – Stack Overflow

How to deal with relative public path · Issue #46 · webpack-contrib/file-loader

去把：

改为：

但是错误依旧:

不过发现了：

build时会多生成对应的目录：

此处的设置感觉有问题：

把之前的：

/assets/top01.jpg

改为了：

/ucowsapp/top01.jpg

而不是所希望的：

/ucowsapp/assets/top01.jpg

感觉是需要：

加上完整的相对路径。

webpack publicPath assets not find image

deploy webpack img src not load

javascript – How to load image files with webpack file-loader – Stack Overflow

Can’t import image from src · Issue #585 · facebookincubator/create-react-app

reactjs deploy image not load

How to Correctly Set Up Webpack Image Loader in your Node app | David Meents

<img src="/assets/top02.jpg" />

改为：

<img src={require("../../../assets/top02.jpg")} />

试试

结果打包出错：

如果不行，待会再参考：

javascript – Correct path for img on React.js – Stack Overflow

换成import:

试试貌似是可以的

再去试试：

结果都是可以正常加载图片的：

然后现在还剩下：

对应的代码是：

即：

都是css中的background或background-image中的url中设置的图片。

reactjs css background image not show on production

reactjs css image production

reactjs – React & Webpack: Loading and displaying images as background-image – Stack Overflow

javascript – ReactJS app can’t load background image – Stack Overflow

javascript – How can I load image(s) used in sass stylesheet in webpack? – Stack Overflow

react js css background image not show on production

Not clear how to include images in my application · Issue #250 · chentsulin/electron-react-boilerplate

react js css less background image

reactjs  生产环境 css url background image

webpack file-loader 解析 css 文件中 background-image路径问题。_CSS_前端开发_INFOCOOL.NET

去把名字改为：

[path][name].[ext]

还是不行。

[译] Webpack——令人困惑的地方 – dmyang – SegmentFault

webpack file-loader 解析 css 文件中 background-image路径问题。_CSS_前端开发_INFOCOOL.NET

Loading Images

加载 LESS 和 SASS | React Webpack 小书

How to Correctly Set Up Webpack Image Loader in your Node app | David Meents

css – React: background image not loading when deployed to server – Stack Overflow

javascript – Correct path for img on React.js – Stack Overflow

Can’t import image from src · Issue #585 · facebookincubator/create-react-app

javascript – How to load image files with webpack file-loader – Stack Overflow

javascript – What does "publicPath" in webpack do? – Stack Overflow

reactjs – Serving static images with Webpack – Stack Overflow

javascript – Webpack outputs wrong path for images – Stack Overflow

deploy webpack img src not load

node.js – webpack css-loader not finding images within url() reference in an external stylesheet – Stack Overflow

publicPath parameter doesn’t work? · Issue #246 · webpack-contrib/extract-text-webpack-plugin

How to deal with relative public path · Issue #46 · webpack-contrib/file-loader

Loading assets (like images) by url with webpack · Issue #62 · jedwards1211/meteor-webpack-react

css-loader

【整理】CSS中的LESS和SASS

【总结】

其实最后还是没有真正解决问题。

只不过是，利用less的语法，部分的缓解了此问题：

webpack.config.babel.js

中，对于为了生产环境中可以正常加载bundle.js等资源，所以设置了：

publicPath: ‘/uapp/‘

即：

导致了，开发环境中，想要正常运行，也要设置：

这就导致了一个问题：

对于上面的那些less的css中的background（或background-image）中url的图片值来说：

如果从：

写成：

则会导致：

生产环境production中可以正常加载图片，但是开发环境development中无法加载

最后使用less的语法，定义了一个变量，在

npm run build

打包生产环境时，设置为/uapp/

npm run dev

之前，设置为””

具体代码为：

ucowsapp/src/style/variables.less

其他代码中调用：

ucowsapp/src/container/abnormal-management/style.less

如此，以最少的改动，基本上实现了动态适配路径了。

转载请注明：在路上 » 【workaround】ReactJS中已配置Webpack的publicPath后图片仍无法加载