I have installed PWA venia in frontend magento 2.3 but images are not loading

Question

I have installed PWA venia in frontend magento 2.3 but images are not loading.

Answer 1

I faced the same problem and was able to resolve it by creating Virtual Host (the reason why it is necessary, is to resolve the CORS erros).

You can view CORS errors when opening the 404 images in a new tab, you will get error in the console.

Create a virtual host by following all steps mentioned here. Point Virtual Host to pub directory of Magento instance.

Give that VH URL in the env file as well. This link may very help full as well.

Answer 2

Create a virtual host and point it to the pub directory instead of the root directory.

Answer 3

First create a virtual host for your magento root directory. If you are dont know how to setup virtual host please follow the link : https://www.digitalocean.com/community/tutorials/how-to-set-up-apache-virtual-hosts-on-ubuntu-14-04-lts

Next you need to edit the file named "makeMediaPath.js" which is placed in the path

pwa-studio-release/packages/venia-concept/src/util/makeMediaPath.js

Now change the following line

const mediaPath = 'http://magento23.com/pub/media/catalog';

In the above line please replace "magento23.com" with your virtual host

Answer 4

Need to Create a Virtual Host and the DocumentRoot should not be the root directory of Magento 2 installed, instead of that add pub to that.

Before the line was

/Users/shuvo/WebServer/MAGENTO/PWA

now

/Users/shuvo/WebServer/MAGENTO/PWA/pub

<VirtualHost *:443>
ServerAdmin webmaster@magento-pwa.devs
DocumentRoot "/Users/shuvo/WebServer/MAGENTO/PWA/pub"
<Directory "/Users/shuvo/WebServer/MAGENTO/PWA/pub">
    Options Indexes FollowSymLinks Includes ExecCGI
    AllowOverride All
    Require all granted
</Directory>
ServerName magento-pwa.devs
ErrorLog "/Users/shuvo/WebServer/MAGENTO/Logs/magento.devs-error_log"
CustomLog "/Users/shuvo/WebServer/MAGENTO/Logs/magento.devs-access_log" common
# Example SSL configuration
SSLEngine on
SSLCertificateFile "/usr/local/etc/httpd/certs/magento-pwa.devs.pem"
SSLCertificateKeyFile "/usr/local/etc/httpd/certs/magento-pwa.devs-key.pem"

and on pwa studio .env file set MAGENTO_BACKEND_URL like this

MAGENTO_BACKEND_URL=https://magento-pwa.devs/

Answer 5

I was facing the similar issue on localhost, tried everything but end up changing the magento entry point from root to pub directory in order to fix this issue.

Here is a cool link from devdocs on how to do it. Good Luck...

https://devdocs.magento.com/guides/v2.3/install-gde/tutorials/change-docroot-to-pub.html