img 用require方式引入图片后出现的问题

Question

因为线上图片无法加载，所以将图片放置本地，然后将部分地址放到mock数据中

然后采用img方式引用 根据webpack图片打包发现引入方式需要采用require('././'+变量）方式

图片是可以加在出来，但是引入require后会出现下列问题：

1、npm start 出现警告 不影响显示

2、npm run build 除了上述警告之外还有另外一个问题

之前试过引入html-withimg-html 插件可以解决第一个问题 但是第二个问题还不知道如何解决？

然后想问下老师为何引入require后会出现上述问题？

有没有什么方法可以避免上述问题的同时采用img方式引入图片？

Answer 1

双越 2017-07-29 20:34:30

你在 mock数据中的图片地址，应该是线上就能访问的图片地址，是绝对路径的 url 而不能是相对路径。

这样的话，你在 React 中即可 <img src={data.img}/> 这样写了

• 提问者 慕工程2357144 #1

  现在就是因为无法访问您源码中的图片，所以我把图片放在了本地，但是如果访问本地的绝对的路径的话，谷歌浏览器是禁止的，所以还是会报错Not allowed to load local resource: 那这个问题要怎么解决呢？

• 双越 回复 提问者 慕工程2357144 #2

  自己起一个静态服务，把图片放在那里，用这个服务来提供图片的访问，试一下。